Проблема с заполнением отмеченных флажков в динамически создаваемом выпадающем списке

Question

У меня есть 2 флажка, и когда я проверяю их, я хочу проверить выбранные данные в выпадающем списке. Я написал код, подобный этому

<input type="checkbox" name="conditions[]" value="1">Sample 1
<input type="checkbox" name="conditions[]" value="2">Sample 2

<select name="Control[]"></select>
<script>
    jQuery(function ($) {
        var $conds = $('input[name="conditions[]"]'),
            $ctrl = $('select[name="Control[]"]');

        $conds.change(function () {
            if (this.checked) {
                $('<option />', {
                    value: this.value,
                    text: this.nextSibling.nodeValue
                }).appendTo($ctrl)

            } else {
                $ctrl.find('option[value="' + this.value + '"]').remove();

            }
        })
    })
</script>

Это работает нормально для меня, но данные не добавляются в раскрывающемся списке выбора.

var addButton = $('.add_button');
var wrapper = $('.field_wrapper'); 
var fieldHTML = '<p></p><div class="new_wrapper"> <select name="Control[]"></select><p></p><center><a href="javascript:void(0);" class="btn btn-danger btn-sm text-center remove_button" >Remove Package</a></center></div>';
var x = 1;
$(addButton).click(function() {
    if(x < maxField) { 
        x++; 
        $(wrapper).append(fieldHTML); 
    }
});

Answer 1

Вы динамически добавляете новые поля выбора. Эти новые добавленные блоки выбора не были выбраны как часть $ctrl = $('select[name="Control[]"]') при загрузке документа. Поэтому вам нужно обновлять выборку каждый раз, когда вставляются новые поля выбора. Вы можете сделать это, вставив строку $ctrl = $('select[name="Control[]"]') в обработчик клика addbutton (после того, как новое поле выбора добавлено в wrapper). Надеюсь, это поможет.

$(addButton).click(function() {
    if(x < maxField) { 
        x++; 
        $(wrapper).append(fieldHTML); 
    }
    // INSERT THIS LINE. THIS WILL SELECT THE NEWLY INSERTED ELEMENTS TOO
    $ctrl = $('select[name="Control[]"]');
});