时间戳

首页 > 解决方案 > 将选中的复选框值附加到下拉列表中

html - 将选中的复选框值附加到下拉列表中

问题描述

如果“valve_type_array”复选框的选中计数大于零，我想显示“配置”下拉列表。并将选中的复选框值附加到“配置”下拉列表中。我坚持将选中的复选框值附加到下拉列表中。任何帮助将不胜感激。

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();
        }
    });

});

标签： htmljquery

解决方案

您需要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 起不再适用。更多细节在这里。

推荐阅读