jQuery get all dynamically generated selects

Question

I am using jQuery to get data and post it through ajax.

To get this data I am using select elements, the user can generate more selects depending on what they need.

Whenever any of these selects change I wish to return all of their values so I can use them later.

However I get an error when ever I try to get the values of all the selects

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

<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>

All the selects apart from the first would have been dynamically generated.

Update: added more clarity to the question

Do you mean you want to mark them as dynamic? If so can you change the code that generates them to add a class of 'dynamic' or similar? Or, given the context, you can use `:gt(0)` to get the select above a certain index — G0dsquad, Dec 22 '16 at 16:16
`$("#marketingProd select").each(...)` makes no sense. Your element with `id="marketingProd"` **is** a `select`, and so it doesn't *contain* any. Did you mean `$("select.marketingProd").each(...)`? — T.J. Crowder, Dec 22 '16 at 16:16
Sorry, the selects are generated dynamically on my actual site but not on the snippet. Every time one of the selects is changed I wish to return the values of all the selects — Ryan, Dec 22 '16 at 16:17
If you put them within a form (including the dynamically generated ones), then you can use jquery's `serialize` method: `$('form').serialize()` to get all their values in an array. — nvioli, Dec 22 '16 at 16:18
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Dec 22 '16 at 16:31

Saumya Rastogi · Answer 1 · 2016-12-22T16:47:40.517

To get all the dynamically added fields just use jQuery's on() like this:

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

Just use jQuery's $ syntax before selecting like this:

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

$(document).ready(function() {
  var arr = [];
  $("#marketingProd").on("change", '.marketingProd', function() {
 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>

Hope this helps!

This part `$("#marketingProd").on("change", '.marketingProd',` is the actual answer. — freedomn-m, Dec 22 '16 at 16:33

score 2 · Accepted Answer · answered Dec 22 '16 at 16:31

You don't seem to be delegating the event handler correctly try:

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

Try the fiddle: https://jsfiddle.net/qm2uyt6y/

score 0 · Answer 3 · answered Dec 22 '16 at 16:21

0

You can get the select with their name and then iterate through it.

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

answered Dec 22 '16 at 16:21

Jaymin Panchal

2,664
2
24
28

Looks like they all have the same class, so `'select.marketingProd'` would be easier to understand and likely more efficient. – freedomn-m Dec 22 '16 at 16:31

jQuery get all dynamically generated selects

3 Answers3