首页 > 解决方案 > 有没有办法在下拉列表中获取非选定项目的值?

问题描述

下面给出的是参考的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 未被选中。

标签: jqueryhtml

解决方案


您可以使用以下内容:

$('#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>


推荐阅读