Добавить отмеченные значения флажка в раскрывающийся список

Question

Я хочу отобразить выпадающий список «config», если установленный флажок «valve_type_array» больше нуля. И добавьте отмеченные значения флажка в выпадающий список «config». Я застрял в , добавив проверенные значения флажка в выпадающий список . Любая помощь будет принята с благодарностью.

HTML:

<div id="type">
<input type="checkbox" name="valve_type_array[]" value="Test1"><span>Test1</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test2"><span>Test2</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test3"><span>Test3</span><br>
<input type="checkbox" name="valve_type_array[]" value="Test4"><span>Test4</span>
</div>

<select class="form-control hide" id="config" name="config">
    <option value="">Please select</option>
</select>

jQuery:

$(document).ready(function(){
    var $checkboxes = $('#type input[type="checkbox"]');        
        $checkboxes.change(function(){
            var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
            if(countCheckedCheckboxes > 0){
                $("#config").show();
        }
    });

});

Answer 1

Вам необходимо создать элемент option для каждого флажка, а затем добавить его к выбору #config. Вы можете использовать map() для наиболее эффективного создания параметров:

$(document).ready(function() {
  let $config = $('#config');
  let $checkboxes = $(':checkbox');

  $checkboxes.on('change', function() {
    $('option.dynamic').remove();
    let options = $checkboxes.filter(':checked').map((i, el) => `<option class="dynamic" value="${el.value}">${el.value}</option>`).get();
    $config.append(options);
  }).trigger('change');
});

label { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="valve_type_array[]" value="Test1"><span>Test1</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test2" checked><span>Test2</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test3"><span>Test3</span></label>
<label><input type="checkbox" name="valve_type_array[]" value="Test4"><span>Test4</span></label>

<select class="form-control hide" id="config" name="config">
  <option value="">Please select</option>
</select>

Что касается программного открытия списка опций select, к сожалению, это невозможно .

Раньше был обходной путь только для Chrome, но он больше не работает с Chrome v53. Подробнее об этом здесь .