jQuery получить все динамически сгенерированные выбирает

Question

Я использую jQuery для получения данных и отправки их через ajax.

Для получения этих данных я использую элементы выбора, пользователь может генерировать больше выборок в зависимости от того, что им нужно.

Всякий раз, когда какое-либо из этих изменений изменяется, я хочу вернуть все их значения, чтобы впоследствии использовать их.

Однако я получаю сообщение об ошибке, когда я когда-либо попытаться получить значения всех выбирает

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

Надеюсь, это поможет!