質問: ### 前提・実現したいこと **jQueryで生成したセレクトボックスの値を取得したいです。** 該当のソースコードは、追加ボタンをクリックすると セレクトボックスが生成されていきます。 現状、すでに存在するセレクトボックスの値を取得し、 resultArea1に反映させることはできます。 しかし、jQueryで生成したセレクトボックスの値は反映されません。 どのようにすれば、生成したセレクトボックスの値を取得することができるでしょうか? よろしくお願いいたします。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/d512c66a628cd7290efc5142092dea60.png) ### 該当のソースコード ``` あ 追加 あ い う ```
回答: ポイントは2つあります。 ### 1. セレクトボックスの特定には id ではなく class を用いる セレクトボックスの選択時のイベントとして `id:hiragana` に対してイベントを登録していますが セレクトボックスを追加するときにも同じ`id:hiragana`を使用しています。 同一HTML内ではidは唯一でないといけないのでここはクラスとして行い、クラスに対するイベントの登録が必要です。 ``` //生成するセレクトボックス var html = '' // NG => +'' +'' ``` ``` //セレクトボックスで選択した値を表示 // NG => $(document).on("change", "#hiragana", function () { $(".hiragana").on("change", function () { ``` ### 2. セレクトボックス追加時にイベント登録を行う ページレンダリング時に行ったイベント登録は、その時に存在し内容をに対して適用できません。 したがってボタン押下して要素が追加された後にイベント登録を行う必要があります。 ``` //追加ボタンをクリックしてセレクトボックスを生成する $("#btn").click(function() { // セレクトボックス追加 $("#resultArea2").append(html); //セレクトボックスで選択した値を表示 $(".hiragana").on("change", function(event) { $('#resultArea1').html(event.target.value); // event.targetはイベントが発生した要素(セレクトボックス)を示します。 }); }); ``` しかしこれだけですと、元からあるセレクトボックスに対してボタンを押さないとイベント取れませんので 同じイベントハンドラーを用意しておきます。 上記を反映させると下記のようになります。 ``` あ 追加 あ い う ```