Question

以下是所引用的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。

Answer 1

您可以使用以下内容：

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

Answer 2

您想要值和未选择的值吗？

您可以将.map用作副作用

$(function() {
  $("#staff_id").on("change",function() {
    var nonSel = [], vals = $("option",this).map(function() {
      if (!this.selected) nonSel.push(this.value)
      else return this.value
    }).get();
    console.log(nonSel,vals)
  });
});

<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>

或者只是循环

$(function() {
  $("#staff_id").on("change",function() {
    var vals = [], nonSel = [];
    $("option",this).each(function() {
      if (this.selected) vals.push(this.value)
      else nonSel.push(this.value)
    });
    console.log(nonSel,vals)
  });
});

<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>

Answer 3

我将其置于on change事件中，然后在选择更改时循环遍历每个事件

请参见小提琴https://jsfiddle.net/vu23oLn1/

$('#staff_id').on('change', function() {
  $('#staff_id option:not(:selected)').each( function(){
  console.log($(this).val());
  }); 
});

<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>

Answer 4

感谢您抽出宝贵的时间解决我的问题，但我找到了所需的解决方案。下面是一个快照。

LocationService

有没有一种方法可以获取下拉菜单中未选中项目的值？

4 个答案: