HTMLSelectElement: метод add()

Базовая реализация Широко доступна

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

Метод HTMLSelectElement.add() добавляет элемент в коллекцию option элементов для данного элемента select.

Синтаксис

add(item)
add(item, before)

Параметры

item: Объект HTMLOptionElement или HTMLOptGroupElement
before Необязательный: Элемент коллекции или индекс типа long, определяющий, перед каким элементом (item) необходимо вставить новый. Если этот параметр null (или указанный индекс не существует), новый элемент добавляется в конец коллекции.

Возвращаемое значение

Значение undefined (None).

Исключения

HierarchyRequestError DOMException: Выбрасывается, если элемент item, переданный в метод, является предком элемента HTMLSelectElement.

Примеры

Создание элементов с нуля

const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/*
  Produces the following, conceptually:

  <select>
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

Параметр before необязателен. Поэтому следующее также допустимо.

sel.add(opt1);
sel.add(opt2);

Добавление в существующую коллекцию

const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/*
  Takes the existing following select object:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  And changes it to:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
  </select>
*/

Параметр before необязателен. Поэтому следующее также допустимо.

sel.add(opt);

Вставка в существующую коллекцию

const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/*
  Takes the existing following select object:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  And changes it to:

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`add`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4
`index_before_parameter`	35	12	8	22	9	35	8	22	9	3.0	37

© 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/HTMLSelectElement/add