Как получить невыбранные или невыбранные параметры из выпадающего списка

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>