使用 jQuery 检查多选中未选择的选项数

Question

我有一个包含大量列表的多选，但不允许我有一个只显示 "All".

的选项

但在后台我还是想检查一下是否都被选中了。 我 saw/had 以前执行过此操作的一些代码片段，但我找不到它。我记得它做的是检查未选择的选项数是否等于 0，然后你就知道所有选项都被选中了。

如果可以的话，我想在一行中做这样的检查：

$("#my-multiselect:not(:selected)").length === 0

但是 $("#my-multiselect:not(:selected)").length 只返回 1 或 0，就像我想象的 true 或 false 一样。我是否错误地使用了 :not()？或者我还需要做什么才能得到准确的计数？

Answer 1

您似乎正在检查 <select> 元素的 "selected" 状态。但是只有 <select> 元素 包含 的 <option> 元素可以是“selected”——而不是 <select> 元素本身。

要计算 中 <select> 元素中所有未选择的 <option> 元素 ，请使用：

$("select#my-multiselect option:not(:selected)").length

看我下面的演示：

$(function() {

  var $button=$('button#calculate'),
      $output=$('p#output');
  
  $button.on('click', function() {
    var unselected = $("select#my-multiselect option:not(:selected)").length;
    $output.text(unselected + " options unselected.");
  });

});

select#my-multiselect {
  width:60px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple id="my-multiselect">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

<button id="calculate">Calculate</button>

<p id="output"><p>

Answer 2

您缺少 space:

$("#my-multiselect :not(:selected)").length === 0

因为您想要 select #my-multiselect 元素内的 options。