HTMLSelectElement: свойство selectedOptions

Только для чтения HTMLSelectElement свойство selectedOptions содержит список элементов <option>, которые в данный момент выбраны в элементе <select>. Список выбранных опций является объектом HTMLCollection с одной записью на каждую выбранную опцию.

Опция считается выбранной, если у неё есть атрибут HTMLOptionElement.selected.

HTMLCollection, который перечисляет все выбранные в данный момент HTMLOptionElement, являющиеся либо дочерними элементами HTMLSelectElement, либо дочерними элементами HTMLOptGroupElement внутри элемента <select>.

Другими словами, любая опция, содержащаяся в элементе <select>, может быть частью результатов, но группы опций в список не включаются.

Если опции не выбраны, коллекция пуста и возвращает length равное 0.

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

HTML, создающий поле выбора и элементы <option>, представляющие каждый из вариантов продуктов, выглядит так:

<label for="foods">What do you want to eat?</label><br />
<select id="foods" name="foods" size="7" multiple>
  <option value="1">Burrito</option>
  <option value="2">Cheeseburger</option>
  <option value="3">Double Bacon Burger Supreme</option>
  <option value="4">Pepperoni Pizza</option>
  <option value="5">Taco</option>
</select>
<br />
<button name="order" id="order">Order Now</button>
<p id="output"></p>

Элемент <select> настроен на возможность выбора нескольких пунктов, и он имеет высоту 7 строк. Обратите также внимание на кнопку <button>, которая служит для получения HTMLCollection выбранных элементов с использованием свойства selected.

Код JavaScript, устанавливающий обработчик событий для кнопки, а также сам обработчик, выглядит следующим образом:

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener(
  "click",
  () => {
    let collection = itemList.selectedOptions;
    let output = "";

    for (let i = 0; i < collection.length; i++) {
      if (output === "") {
        output = "Your order for the following items has been placed: ";
      }
      output += collection[i].label;

      if (i === collection.length - 2 && collection.length < 3) {
        output += " and ";
      } else if (i < collection.length - 2) {
        output += ", ";
      } else if (i === collection.length - 2) {
        output += ", and ";
      }
    }

    if (output === "") {
      output = "You didn't order anything!";
    }

    outputBox.textContent = output;
  },
  false,
);

Этот скрипт устанавливает обработчик события click на кнопку «Заказать». При нажатии обработчик получает список выбранных опций с помощью selectedOptions, затем перебирает опции в списке. Строка конструируется для отображения заказанных товаров с логикой построения списка в соответствии с правилами грамматики русского языка (включая использование запятой в списке).

Результат выполнения выглядит следующим образом:

• Списки (меню)