Q&A
eachとthisで実現可能ということでs8_chuさまから回答いただいた内容と考え方は同じかなと思っています（違っていたらすみません）。ベストアンサーはs8_chuさまとさせていただきましたが、ご教示ありがとうございました。
###前提・実現したいこと
動的に生成される複数セレクトボックスに対して、javascirptで
changeイベントをしかけたいのですが、一番先頭の要素を取得してしまいます。
イベントの取り方が、$('.optionSelect')で、クラスなのが原因と思いますが、
idが動的なため、どのように一意にイベント設定すればいいかご教示いただけないでしょうか。
###該当のソースコード
html
1// セレクトボックス1 2<select name="option[1]" class="optionSelect" data-id="1"> 3 <option value="0">0</option> 4 <option value="1">1</option> 5 <option value="2">2</option> 6</select> 7 8// セレクトボックス2 9<select name="option[2]" class="optionSelect" data-id="1"> 10 <option value="0">0</option> 11 <option value="1">1</option> 12 <option value="2">2</option> 13</select> 14 15...3,4,5とオプション数だけセレクトボックスを設置 16
javascript
1$('.optionSelect').change(function(){ 2 console.log("change2"); 3 console.log($('.optionSelect').val()); 4 console.log($('.optionSelect').data('id')); 5// どのセレクトボックスを指定しても先頭の要素が表示される 6 return; 7});
回答3件
0
ベストアンサー
的外れかもしれませんが、質問者さんが実現したいことはこのような動作でしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<label> 15 <select name="option[1]" class="optionSelect" data-id="1"> 16 <option value="0">0</option> 17 <option value="1">1</option> 18 <option value="2">2</option> 19 </select> 20</label> 21<label> 22 <select name="option[2]" class="optionSelect" data-id="1"> 23 <option value="0">0</option> 24 <option value="1">1</option> 25 <option value="2">2</option> 26 </select> 27</label> 28<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 29<script> 30 $(function () { 31 $('.optionSelect').change(function () { 32 $(".optionSelect").each(function () { 33 console.log($(this).val()); 34 }); 35 }); 36 }); 37</script> 38</body> 39</html>
投稿2017/03/28 00:23
総合スコア14731
0
セレクタで複数の要素がとれていて、その全てに適用したいのだから、
JavaScript
1$('.optionSelect').each(function() { this.change(function() {}) })
かなあ。
投稿2017/03/28 00:29
総合スコア13703
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/28 00:53