jquery - 有没有办法在下拉列表中获取非选定项目的值?
问题描述
下面给出的是参考的html。假设如果用户只是选择任何一个选项并提交表单。我想知道哪些选项未选中/未选中?
使用这个: $('#staff_id option:not(:selected)'); 给出我正在寻找的对象,但我需要值。
使用这个: $('#staff_id option:not(:selected)').val(); 只为未选中的第一个赋予值。
<select class="mdb-select initialized" id="staff_id" name="staff_id[]" multiple="" searchable="Search here...">
<option value="0" disabled="" selected="">Select</option>
<option value="712">Alex</option>
<option value="468">Verk</option>
<option value="470">Reko</option>
<option value="472">Paul</option>
</select>
假设如果选择了 Alex,我需要知道 verk、Reko 和 Paul 未被选中。
解决方案
您可以使用以下内容:
$('#staff_id').on('change', function() {
var values = $.map($('#staff_id option:not(:selected)'), function(option) {
return option.value;
});
});
您需要遍历 jQuery 元素以获取所有值。当您调用 时val()
,它仅在第一个元素上调用它。
演示
$('#staff_id').on('change', function() {
var values = $.map($('#staff_id option:not(:selected)'), function(option) {
return option.value;
});
console.log(values)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="mdb-select initialized" id="staff_id" name="staff_id[]" multiple="" searchable="Search here...">
<option value="0" disabled="" selected="">Select</option>
<option value="712">Alex</option>
<option value="468">Verk</option>
<option value="470">Reko</option>
<option value="472">Paul</option>
</select>