メモ項目を追加していきたいです

Question

###前提・実現したいこと
追加ボタンを押したときにメモ項目を追加したいです。カテゴリー別に。
###発生している問題・エラーメッセージ

どうコードを書いていいのかかわかりません

###該当のソースコード

<div id="adding-lists-page">
                    <div class="c1">
                        <div class="categoty-title">野菜<span>+</span></div>
                        
                    </div>
                </div>

<form id="adding-list">
                        <div class="name-list">
                            <div>名前</div>
                            <input id="name" type="text"/>
                        </div>
                        <div class="categories">
                            <div>カテゴリー</div>
                            <select id="category">
                                <option value="c1">野菜</option>
                                <option value="c2">肉</option>
                                <option value="c3">魚</option>
                                <option value="c4">お菓子</option>
                            </select>
                        </div>
                        
                        <button type="submit" id="adding">リストに追加</button>
                    </form>

$('#adding').click(function () {
        var name = $('#name').val();
        var category = $('#category').val();

    });

append()を試して追加はできそうですが、カテゴリーごとに分けて追加するのがわからないです。

理想の形

<div id="adding-lists-page">
      <div class="c1">
          <ul>野菜
              <li>白菜</li>
          </ul>            
      </div>
   <div class="c2">
          <ul>肉
       <li>牛肉</li>
          </ul>
</div>

<form>で選択したカテゴリーと同じカテゴリーに追加したいです。 例）野菜カテゴリーを<form>で選択したら、野菜カテゴリーにメモが追加される。

Comments

[Lhankor_Mhy]

補足願います。『カテゴリー別に。』とは具体的にはどのような状態でしょうか。たとえば、メモ項目が追加された時に「こうなってほしいHTML」みたいなものは提示できますか？

Answer 1

ご自分で書かれたコードのとおり、

var category = $('#category').val();

で選択されているカテゴリが取得できますので、あとは、$('.adding-lists-page .c1')みたいな感じでカテゴリ別に操作できると思います。

他に分からないことはありますか？

コメントを受けて追記

$('.adding-lists-page .c1')の.c1部分をカテゴリー別で取得した var category を使って、メモの追加先をカテゴリーごとに変更したいのですがご教授お願いできますか？

そこの部分は単純に文字列なので、$( '.adding-lists-page .' + category )みたいな感じでいいと思いますよ。

Comments

[terry3]

すいませんあともう一つなんですが、$('.adding-lists-page .c1')の.c1部分をカテゴリー別で取得した var category を使って、メモの追加先をカテゴリーごとに変更したいのですがご教授お願いできますか？

Answer 2

submitを押すとページが遷移してしまうのでjavascriptでカテゴリーを
追加しても、表示上反映されることはありません。
送った先のサーバーサイドプログラムで追加するか、submitを止めるかが
必要です

Comments

[terry3]

「submitを止めるかが 必要です」というのは”return false”をsubmitの最後に追加することであってますでしょうか？
submitを止めた場合でのカテゴリー追加の具体的な方法などはありますでしょうか？