Вывести значение выбраного option-а из selecta в js

Question

HTML:

<select size="1" multiple name="класс[]">
  <option class="grade" value="5">5</option>
  <option class="grade" value="6">6</option>
  <option class="grade" value="7">7</option>
</select>
<input id="search" type="button" value="Искать">

Как найти option, который он выбрал, но не выделял? Например, если пользователь нажмёт на кнопку, вообще не трогая select? Для примера предлагаю вывести значение option-а в alert.

Answer 1

У тега select есть специальное свойство - .selectedOptions. Это коллекция, которая содержит в себе все выбранные option.

const selectElem = document.querySelector('select');
const selectedOptions = selectElem.selectOptions;
for (let i = 0; i < selectedOptions.length; i++) {
  alert(selectedOptions[i].innerText);
}

Подробнее: документация

Update:

Можно получить список всех option с помощью .options. Все невыбранные можно получить примерно так:

const selectElem = document.querySelector('select');
const selectedOptions = selectElem.selectOptions;
const allOptions = selectELem.options;

const unselectedOptions = allOptions.filter(option => {
   return !selectedOptions.some(selectedOption => selectedOption === option);
});

БЛОГ НА HUSL

Вывести значение выбраного option-а из selecta в js

Ответы (1 шт):

Update: