jQueryで生成したセレクトボックスの値を取得したい

前提・実現したいこと

jQueryで生成したセレクトボックスの値を取得したいです。

該当のソースコードは、追加ボタンをクリックすると
セレクトボックスが生成されていきます。
現状、すでに存在するセレクトボックスの値を取得し、
resultArea1に反映させることはできます。

しかし、jQueryで生成したセレクトボックスの値は反映されません。

どのようにすれば、生成したセレクトボックスの値を取得することができるでしょうか？
よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">	

$(function() {

//生成するセレクトボックス
var html = 
'<div>'
+'<select id="hiragana">'
+'<option value="あ">あ</option>'
+'<option value="い">い</option>'
+'<option value="う">う</option>'
+'</select>'
+'</div>';

//追加ボタンをクリックしてセレクトボックスを生成する
$("#btn").click(function(){
	$("#resultArea2").append(html);
});

//セレクトボックスで選択した値を表示
$(document).on("change", "#hiragana", function () {
    var output = $('option:selected').val();
    $('#resultArea1').html(output);
});

});
</script>

</head>
<body>

<div id="resultArea1">
あ
</div>

<div>
<button id="btn">追加</button>
</div>

<select id="hiragana">
  <option value="あ">あ</option>
  <option value="い">い</option>
  <option value="う">う</option>
</select>

<div id="resultArea2">
</div>


</body>
</html>

退会済みユーザー

2018/06/30 09:37

「jQueryで生成したセレクトボックスの値は反映」の部分、「どうしたいのか」が書かれていません。回答に困ります。

行動規範の内容に同意します

回答2件

ベストアンサー

id="hiragana" は class="hiragana" にしておきます。

JavaScript
1  // 追加ボタンをクリックしてセレクトボックスを生成する
2  $("#btn").click(function(){
3    $("#resultArea2").append(html).find('.hiragana:last').trigger('change');
4  });
5
6  // セレクトボックスで選択した値を表示
7  $(document).on("change", ".hiragana", function () {
8    var output = $('.hiragana')
9      .map(function(index, element) {
10        return $(this).val();
11      })
12      .get()
13      .join('');
14    $('#resultArea1').text(output);
15  });

投稿2018/07/02 07:50

x_x

総合スコア13749

ポイントは2つあります。

1. セレクトボックスの特定には id ではなく class を用いる

セレクトボックスの選択時のイベントとして id:hiragana に対してイベントを登録していますが
セレクトボックスを追加するときにも同じid:hiraganaを使用しています。
同一HTML内ではidは唯一でないといけないのでここはクラスとして行い、クラスに対するイベントの登録が必要です。

js
1//生成するセレクトボックス
2var html = 
3'<div>'
4// NG => +'<select id="hiragana">'
5+'<select class="hiragana">'

js
1//セレクトボックスで選択した値を表示
2// NG => $(document).on("change", "#hiragana", function () {
3$(".hiragana").on("change", function () {

2. セレクトボックス追加時にイベント登録を行う

ページレンダリング時に行ったイベント登録は、その時に存在し内容をに対して適用できません。
したがってボタン押下して要素が追加された後にイベント登録を行う必要があります。

js
1//追加ボタンをクリックしてセレクトボックスを生成する
2$("#btn").click(function() {
3  // セレクトボックス追加
4  $("#resultArea2").append(html);
5  //セレクトボックスで選択した値を表示
6  $(".hiragana").on("change", function(event) {
7    $('#resultArea1').html(event.target.value);
8    // event.targetはイベントが発生した要素(セレクトボックス)を示します。
9  });
10});

しかしこれだけですと、元からあるセレクトボックスに対してボタンを押さないとイベント取れませんので
同じイベントハンドラーを用意しておきます。

上記を反映させると下記のようになります。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6<script type="text/javascript">    
7
8$(function() {
9  //生成するセレクトボックス
10  var html = 
11'<div>'
12+'<select class="hiragana">'
13+'<option value="あ">あ</option>'
14+'<option value="い">い</option>'
15+'<option value="う">う</option>'
16+'</select>'
17+'</div>';
18
19  //追加ボタンをクリックしてセレクトボックスを生成する
20  $("#btn").click(function(){
21    $("#resultArea2").append(html);
22    // 追加したセレクトボックスにイベントハンドラーの登録
23    $(".hiragana").on("change", function(event) {
24      $('#resultArea1').html(event.target.value);
25    });
26  });
27
28  // 元のセレクトボックスで選択した値を表示
29  $(".hiragana").on("change", function(event) {
30    $('#resultArea1').html(event.target.value);
31  });
32});
33</script>
34
35</head>
36<body>
37
38<div id="resultArea1">
39あ
40</div>
41
42<div>
43<button id="btn">追加</button>
44</div>
45
46<select class="hiragana">
47  <option value="あ">あ</option>
48  <option value="い">い</option>
49  <option value="う">う</option>
50</select>
51
52<div id="resultArea2">
53</div>
54
55
56</body>
57</html>