将选中的复选框值添加到下拉列表中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将选中的复选框值添加到下拉列表中相关的知识，希望对你有一定的参考价值。
如果“ 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();
);
);
答案
您需要为每个复选框创建一个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);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<select class="form-control hide" id="config" name="config">
<option value="">Please select</option>
</select>以上是关于将选中的复选框值添加到下拉列表中的主要内容，如果未能解决你的问题，请参考以下文章