jQuery動的に生成されたすべての選択を取得

Question

jQueryを使用してデータを取得し、ajax経由で投稿します。

このデータを取得するには、select要素を使用しています。ユーザーは必要なものに応じて選択肢を増やすことができます。

これらのいずれかが変更されると、後でそれらを使用できるように、すべての値を戻したいと思います。

私はすべての選択

$(document).ready(function() { 
 
    $("#marketingProd").on("change", function() { 
 
\t $("#marketingProd select").each(function() { 
 
\t \t alert(($this).val()); 
 
\t }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="marketingProd"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingprod1"> 
 
    <option value=""></option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <div class="newProd" id="newProd2"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingProd2"> 
 
     <option value=""></option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    </div> 
 
    <div class="newProd" id="newProd3"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingProd3"> 
 
     <option value=""></option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    </div> 
 
</div>

離れて最初の動的に生成されていたであろうから、すべての選択の値を取得しようとするこれまでのとき、私はエラーを取得しますが。

更新：あなたは、自分の名前の選択を取得し、それを反復処理することができ、質問

Answer 1

あなたは正しくしようとイベントハンドラを委任していないようです：

$(document).ready(function() { 
    $("#marketingProd").on("change", "select", function() { // delegated to the SELECT 
    $("#marketingProd select").each(function() { 
     alert($(this).val()); // Fixed syntax error here 
    }); 
    }); 
}); 

はバイオリンを試してみてください。https://jsfiddle.net/qm2uyt6y/

Answer 2

に多くの明快さを追加しました。

$('select[name^="marketingProd"]').each(function(index,element){ 
    var selectedValue = element.val(); 
}); 

Answer 3

ちょうどjQueryのon()次のように使用するすべての動的に追加されたフィールドを取得するには：

$("#marketingProd").on("change", '.marketingProd', function(e) { ... }); 

はちょうどこのように選択する前に、jQueryの$の構文を使用します。

alert($(this).val()); 

$(document).ready(function() { 
 
    var arr = []; 
 
    $("#marketingProd").on("change", '.marketingProd', function() { 
 
\t arr.push($(this).val()); 
 
    console.log('Value changed: ' + $(this).val()); 
 
    }); 
 
    
 
    $("#btn").on('click', function(e) { 
 
    console.log(arr); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="marketingProd"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingprod1"> 
 
    <option value=""></option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
    </select> 
 
    <div class="newProd" id="newProd2"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingProd2"> 
 
     <option value=""></option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    </div> 
 
    <div class="newProd" id="newProd3"> 
 
    <select class="marketingProd" name="marketingProd[]" id="marketingProd3"> 
 
     <option value=""></option> 
 
     <option value="1">One</option> 
 
     <option value="2">Two</option> 
 
     <option value="3">Three</option> 
 
     <option value="4">Four</option> 
 
     <option value="5">Five</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<button id="btn">Click to view result</button>

を