我对 JavaScript 或 jQuery 几乎一无所知。
我需要在 <select>
中选择/取消选择一个选项单击复选框或按钮时可以选择多个选项。
复选框需要选择/取消选择具有相同值的选项。 我的想法是这样的:
$(document).ready(function() {
var input = $('#entry-select');
var checkboxes = $('.entrycheckbox');
checkboxes.click(function() {
var element = $(this);
var value = element.val();
input.val(value);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
这仅选择具有上次单击的复选框值的选项,而不选择选中的选项,并且取消选择所有其他选项。
最佳答案
您只需为 val()
提供最后选择的复选框的值。要按照您的要求进行此操作,您需要构建所有选定复选框的数组并将其提供给 val()
。
要实现此目的,您可以使用 filter()
获取选定的复选框,然后使用 map()
构建数组:
input.val(checkboxes.filter(':checked').map((i, el) => el.value));
$(document).ready(function() {
var $input = $('#entry-select');
var $checkboxes = $('.entrycheckbox');
$checkboxes.click(function() {
$input.val($checkboxes.filter(':checked').map((i, el) => el.value));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
<select name="entries" id="entry-select" multiple>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</form>
如果您不希望用户直接更改所选的选项
,您可能还需要考虑将readonly
添加到select
。
关于javascript - 如何使用 JavaScript/jQuery 选择/取消选择带有复选框的选择选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59103729/