Почему выбранный <option>css запрашивается с помощью: флажок, а HTML и Javascript использует выбранный? - PullRequest
Новая
       33

Почему выбранный <option>css запрашивается с помощью: флажок, а HTML и Javascript использует выбранный?

0 голосов
/ 01 мая 2020

Вы можете выбрать выбранную опцию из <select>, но если у вас есть <select multiple> и вам нужно что-то сделать динамически с выбранными опциями.

Вы можете запроситьВыбрать: флажок или вы можете выбрать все опций и фильтра .selected

Может кто-нибудь объяснить это несоответствие? 

function run() {
  let optionChecked;
  let optionSelected;
  try {
    optionChecked = document.querySelector("option:checked");
  } catch (e) {}

  try {
    optionSelected = document.querySelector("option:selected");
  } catch (e) {}

  console.log('selector: option:checked: ', optionChecked) // chosen option
  console.log('selector: option:selected: ', optionSelected) // undefined

  console.log('js-property: option.checked: ', optionChecked.checked) // undefined
  console.log('js-property: option.selected: ', optionChecked.selected) // true

}
/*
* never used.
*/

option:selected {
  color: brown;
}


/*
* Even tho not supported - when inspecting the element, we see the css-selector match
*/

option:checked {
  color: hotpink;
}
<h2>Example</h2>
<select name="" id="select1">
  <option value="a">a</option>
  <!-- Invalid -->
  <option value="b" checked>b</option>
   <!-- Valid -->
  <option value="c" selected>c</option>
  <option value="d">d</option>
</select>

<button onclick="run()">run</button>

1 Ответ

1 голос
/ 01 мая 2020

Согласно ранним версиям Селекторов 3 , :checked впервые был предложен как :selected около 2000 года. Однако ни одна редакция проекта фактически не содержит определения для :selected, поэтому я могу только предположим, что это было предложено :selected перед тем, как вводить черновики как :checked.

Так как было указано, что он применяется к атрибутам checked и selected в HTML (предположительно потому, что они оба служат цели в форме), не было необходимости иметь два псевдокласса, означающих одно и то же. Кроме того, цель состояла в том, чтобы отделить селекторы от HTML, поэтому было бы идеально иметь одно уникальное имя для этого псевдокласса. По какой-то причине, решая, как назвать этот псевдокласс, авторы spe c выбрали :checked. Я просмотрел архивы списков рассылки www-style за 1999–2000 гг. И, к сожалению, не смог найти ничего публично обсуждающего это решение.

Свойства .checked и .selected DOM просто отражают имена своих атрибутов HTML и не связаны с чем-либо в селекторах. Вот почему вы обнаружите, что свойство .checked появляется только в HTMLInputElement ; и .selected, только в HTMLOptionElement .

jQuery содержит псевдокласс :selected, который в основном представляет собой JavaScript переопределение :checked, которое применяется только к option элементы. Сделайте из этого то, что вы будете , но я рекомендую просто игнорировать это. Я упоминаю это только как пустяки.

...