HTMLOptionElement: Конструктор Option()

Базовый уровень Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Конструктор Option() создаёт новый элемент HTMLOptionElement.

Синтаксис

new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)

Параметры

text Необязательно: Строка, представляющая содержимое элемента, т.е. отображаемый текст. Если не указано, используется значение по умолчанию "" (пустая строка).
value Необязательно: Строка, представляющая значение HTMLOptionElement, т.е. атрибут value эквивалентного элемента <option>. Если не указано, используется значение text, например, для значения связанного элемента <select> при отправке формы на сервер.
defaultSelected Необязательно: Значение true или false, которое устанавливает значение атрибута selected, т.е. чтобы этот элемент <option> стал значением по умолчанию, выбранным в элементе <select> при первой загрузке страницы. Если не указано, используется значение по умолчанию false. Обратите внимание, что значение true не устанавливает опцию как выбранную, если она не выбрана изначально.
selected Необязательно: Значение true или false, устанавливающее состояние выбора элемента; по умолчанию false (не выбрано). Если опущено, даже если аргумент defaultSelected равен true, опция не выбирается.

Примеры

Добавление новых опций

/* assuming we have the following HTML
<select id='s'>

</select>
*/

const s = document.getElementById("s");
const options = [Four, Five, Six];

options.forEach((element, key) => {
  s[key] = new Option(element, key);
});

Добавление опций с различными параметрами

/* assuming we have the following HTML
<select id="s">
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
</select>
*/

const s = document.getElementById("s");
const options = ["zero", "one", "two"];

options.forEach((element, key) => {
  if (element === "zero") {
    s[key] = new Option(element, s.options.length, false, false);
  }
  if (element === "one") {
    s[key] = new Option(element, s.options.length, true, false); // Will add the "selected" attribute
  }
  if (element === "two") {
    s[key] = new Option(element, s.options.length, false, true); // Just will be selected in "view"
  }
});

/* Result
<select id="s">
  <option value="0">zero</option>
  <option value="1" selected="">one</option>
  <option value="2">two</option> // User will see this as 'selected'
</select>
*/

Спецификации

Спецификация
HTML # dom-option-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`Option`	1	12	1	≤12.1	1.2	18	4	≤12.1	1	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option