Question

我有一个多选下拉列表，如下所示

<select id="mydd" multiple searchable="Search here..">
   <option value="" disabled selected>Choose your country</option>
   <option selected="selected" value="1">USA</option>
   <option selected="selected" value="2">Germany</option>
   <option selected="selected" value="3">France</option>
   <option value="4">Poland</option>
   <option selected="selected" value="5">Japan</option>
   <option value="6">Korea</option>
   <option selected="selected" value="7">India</option>
</select>

我想获取所有未选择的选项（4和6）的长度。我尝试过

$("#mydd option").not(":selected").length

未成功。谁能解释为什么这行不通？

Answer 1

您的代码最初有效。运行代码段。

似乎使用 .not（）检查DOM而不是当前标记。

第一个警报包含您的代码，该代码之所以有效，是因为它们（DOM和HTML）呈现为相同。发生某些事件后，DOM可能不等于我们浏览器中显示的HTML。

当您选择一个选项时，我又使用了 2条警报；一个使用.not（），另一个使用jQuery选择器。

请注意，当您单击选项时， HTML未被修改。您具有选择属性的选项字段不会更改，它们仍然保持不变。 但是在DOM中，选定的属性被删除，只有被单击的属性才被“选定”。

最后一个警报包含您的期望值。

$(document).ready(function() {
  // initial
  alert("Initial; There are " + $("#mydd option").not(":selected").length + " not selected options.");

  // when an option is clicked, DOM itself would unselect the other options, but it doesn't modify the markup
  $("#mydd").click(function() {
    alert("Using .not; There are " + $("#mydd option").not(":selected").length + " not selected options.");

    // check if the 'selected' attribute exist
    alert("Using jquery selector; There are " + $("#mydd option:not([selected]").length + " not selected options.");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mydd" multiple searchable="Search here..">
  <option value="" disabled selected>Choose your country</option>
  <option selected="selected" value="1">USA</option>
  <option selected="selected" value="2">Germany</option>
  <option selected="selected" value="3">France</option>
  <option value="4">Poland</option>
  <option selected="selected" value="5">Japan</option>
  <option value="6">Korea</option>
  <option selected="selected" value="7">India</option>
</select>

如何从多选选择下拉列表中获得未选择或未选择的选项的长度

1 个答案: