htmlとjavascriptで機能の実装を行っています。
セレクトボックス内にある要素をクリックすることで、その要素と関連するセレクトボックスを追加したいのですが、その要素を選択してもセレクトボックスが追加されません。
例えば、セレクトメニュー内にスポーツ・レジャーとあれば、それを選択すると下に見た目が同じセレクトボックスが出現し、そのセレクトボックスのメニュー内にスポーツ・レジャーに関連するもの(ゴルフ、自転車、テニスなど)が出現する。
初心者のため、上手く伝えられているか分かりませんが、ご教授お願いします。
該当のソースコード
html
1<div class="form-group", id="delivery"> 2 <label>配送料の負担 3 <span class="form-require">必須</span> 4 </label> 5 <div class="select-wrap"> 6 <select class="select-default"> 7 <option value="">---</option> 8 <option value="1", id="select-pay">送料込み(出品者負担)</option> 9 <option value="2">着払い(購入者負担)</option> 10 </select> 11 <%= fa_icon "angle-down" %> 12 </div> 13</div> 14
javascript
1$(function(){ 2 function buildSEND(send){ 3 var html = `<div class="form-group"> 4 <label>配送の方法 5 <span class="form-require">必須</span> 6 </label> 7 <div class="select-wrap"> 8 <select class="select-default"> 9 <option value="">---</option> 10 <option value="3">未定</option> 11 <option value="4">らくらくメルカリ便</option> 12 <option value="5">ゆうメール</option> 13 <option value="6">レターパック</option> 14 <option value="7">普通郵便(定形、定形外)</option> 15 <option v2alue="8">クロネコヤマト</option> 16 <option value="9">ゆうパック</option> 17 <option value="10">クリックポスト</option> 18 <option value="11">ゆうパケット</option> 19 </select> 20 <i class="fas fa-angle-down"></i> 21 </div> 22 </div>` 23 return html; 24 } 25 26 $('#select-pay').on('click', function(){ 27 console.log(this) 28 var html = buildSEND(); 29 console.log(html) 30 $('#delivery').append(html) 31 }); 32})
試したこと
選択したい要素をid指定してみましたが、option内でid指定しても発火しないようです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/09 01:37
2018/11/09 01:46
2018/11/09 01:56