HTMLSelectElement: add() method
The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.
Syntax
Parameters
An element of the collection, or an index of type long, representing the item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.
Return value
Exceptions
Thrown if the item passed to the method is an ancestor of the HTMLSelectElement .
Adding options to select with javascript
JS Perf comparison of both mine and Sime Vidas’ answer, run because I thought his looked a little more understandable/intuitive than mine and I wondered how that would translate into implementation. According to Chromium 14/Ubuntu 11.04 mine is somewhat faster, other browsers/platforms are likely to have differing results though.
Edited in response to comment from OP:
[How] do [I] apply this to more than one element?
And, finally (after quite a delay. ), an approach extending the prototype of the HTMLSelectElement in order to chain the populate() function, as a method, to the DOM node:
The most concise and intuitive way would be:
You can also differentiate the name and the value or add items at the start of the list with additional parameters to the used functions:
HTMLSelectElement.add(item[, before]);
new Option(text, value, defaultSelected, selected);
Update: Since you want to reuse this code, here’s the function for it:
I don’t recommend doing DOM manipulations inside a loop — that can get expensive in large datasets. Instead, I would do something like this:
You can read more about DocumentFragment on MDN, but here’s the gist of it:
It is used as a light-weight version of Document to store a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn’t part of the actual DOM’s structure, changes made to the fragment don’t affect the document, cause reflow, or incur any performance impact that can occur when changes are made.
Записки программера
В языке HTML есть такой тег – SELECT. SELECT состоит из элементов OPTION, которые представляют собой элементы списка. Сами элементы OPTION состоят из текстовой метки заключенной между тегами option и атрибута value в котором содержится значение соответствующее текстовой метке. Текстовая метка видна пользователю в списке, тогда как значение value не отображается на экране, а передается на сервер при отправке формы (на сервер передаются только value-значения выделенных элементов списка). Таким образом, для изменения элемента SELECT, мы должны воздействовать на элементы OPTION. Ниже указан пример кода такого элемента.
Вот как будет выглядеть фрагмент html-кода на страничке
Как же взаимодействовать с SELECT из Javascript?
В DOM (Document Object Model / объектная модель документа) есть такой интересный метод getElementById объекта document. Вот с его помощью мы и будем обращаться к элементам списка. Смотрим ниже код вызова такого метода в JavaScript:
В случае, если список находится внутри формы, то к нему можно обратиться и через форму:
где, myForm имя формы заданное через атрибут name в теге FORM, а mySelect имя элемента формы, заданное через атрибут name в теге SELECT.
Как добавить новый элемент в список SELECT?
Все HTML элементы OPTION доступны в javascript-скрипте через свойство options объекта Select, которое является коллекцией элементов (т.е. массивом) элементов Option:
Если нужно добавить элемент в конец списка, то удобней это сделать следующим образом:
Свойство length объекта options содержит количество элементов в списке. Данное свойство доступно как для чтения, так и для записи. Если установить свойству length значение больше чем текущее количество элементов, то в список будут добавлены пустые элементы. Если же установленное значение меньше текущего количества элементов списка, то список будет усечен до указанного количества элементов (лишние элементы будут удалены). Таким образом, добавить новый элемент в список можно и так (допустим у нас есть пустой список, добавим первый элемент):
Вернемся к функции-конструктору Option(). Помимо указания текста и значения можно указать является ли элемент выделенным по умолчанию (defaultSelected), т.е. будет ли элемент выделенным при сбросе формы методом reset() и является ли элемент выделенным в данный момент (selected). Полный синтаксис функции конструктора объекта Option имеет следующий вид:
где первые два аргумента – это строки, а третий и червертый булевы аргументы и принимают значения true или false.
До сих пор для добавления элемента мы использовали BOM (Browser Object Model / объектная модель браузера), однако лучше, во всех отношениях, использовать методы DOM (Document Object Model / объектная модель документа), и реализовывать добавление элемента так:
Некоторые особенности браузера IE : В IE 5+ исключена (ввиду нестабильной работы) возможность добавления элемента списка через new Option(), когда сам список SELECT находится в одном документе (окне, фрейме), а элементы добавляются из другого документа (окна, фрейма), например, если SELECT в родительском окне, а добавить элементы нужно из дочернего окна, открытого через window.open(). Используя DOM-методы вы сможете обойти данную проблему.
Доступ к элементам списка
Элементы списка в массиве options индексируются с нуля, поэтому первый элемент списка имеет индекс 0:
- objSel.options[0] – первый элемент списка
- objSel.options[objSel.options.length-1] – последний элемент списка
Изменение элемента списка
Как узнать какой элемент выбран и как выбрать нужный элемент?
У объекта элемента SELECT существует свойство selectedIndex, которое содержит индекс выделенного элемента, или -1 если нет выделенных элементов.
Следует отметить, что возможен выбор нескольких значений в списке, для этого нужно указать свойство multiple в теге SELECT и указать количество видимых без прокрутки списка элементов через атрибут size (т.е. установить высоту списка измеряемую в видимых элементах), например, разметка <select size=”3″ multiple>…</select> создаст список высотой в 3 элемента, в котором разрешено выбирать несколько элементов сразу. Если вы указываете size больше 1, то список перестает быть выпадающим, а изменяет вид на обычный блок с полосой прокрутки (она доступка при необходимоти). Свойство size можно указывать и без multiple.
В случае когда доступен множественный выбор элементов, данное свойство содержит индекс первого выделенного в списке элемента (т.е. того элемента который в списке находиться выше). Чтобы в данном случае найти все выделенные элементы нужно перебрать в цикле все элементы массива options и проверить их свойство selected, которое равно true у выделенных элементов:
Функция getSelectedIndexes() принимает в качестве аргумента объект списка и возвращает массив индексов выделенных элементов.
Пример использования (отображение индексов выделеных элементов):
Описанные свойства selectedIndex и selected являются свойствами как для чтения так и для записи, поэтому присваивая им значения можно выделять нужные элементы.
Для выбора нескольких элементов (при установленном свойстве multiple) нужно установить свойство selected=true для всех нужных элементов:
При динамическом заполнении списка через скрипт и последующей установке выделенного пункта через свойство selectedIndex или selected некоторые браузеры могут вести себя по разному. Так в браузере Opera проявляется такое поведение (баг) в добавлении пустых элементов в список, доступ к которым из скрипта невозможен (скрипт их не видит, зато пользователь видит и может их выбрать). Эти пустые лже-элементы списка появляются после установки свойства selectedIndex или selected. Для обхода этой ошибки в Opera используйте установку этих свойств через setTimeout с задержкой в 1мс:
Удаление n-го элемента списка
Или используя DOM метод remove:
Очистка списка SELECT (удаление всех элементов из списка)?
Для этого можно установить свойство length в ноль:
Либо вызвать DOM метод remove для каждого элемента списка:
JavaScript: Dynamically Add & Remove Options
Summary: in this tutorial, you will learn how to dynamically add options to and remove options from a select element in JavaScript.
The HTMLSelectElement type represents the <select> element. It has the add() method that dynamically adds an option to the <select> element and the remove() method that removes an option from the <select> element:
- add(option,existingOption) – adds a new <option> element to the <select> before an existing option.
- remove(index) – removes an option specified by the index from a <select> .
Adding options
To add an option dynamically to a <select> element, you use these steps:
- First, create a new option.
- Second, add the option to the select element.
There are multiple ways to create an option dynamically and add it to a <select> in JavaScript.
1) Using the Option constructor and add() method
First, use the Option constructor to create a new option with the specified option text and value:
Then, call the add() method of the HTMLSelectElement element:
The add() method accepts two arguments. The first argument is the new option and the second one is an existing option.
In this example, we pass undefined in the second argument, the method add() method will add the new option to the end of the options list.
2) Using the DOM methods
First, construct a new option using DOM methods:
Second, add the new option to the select element using the appendChild() method:
Removing Options
There are also multiple ways to dynamically remove options from a select element.
The first way is to use the remove() method of the HTMLSelectElement type. The following illustrates how to remove the first option:
The second way to remove an option is to reference the option by its index using the options collection and set its value to null :
The third way is to use the removeChild() method and remove a specified option. The following code removes the first element of a the selectBox :
To remove all options of a select element, you use the following code:
When you remove the first option, the select element moves another option as the first option. The removeAll() function repeatedly removes the first option in the select element, therefore, it removes all the options.
Put it all together
We’ll build a application that allows users to add a new option from the value of an input text and remove one or more selected options.
Here’s the project’s structure:
The style can be found here.
First, use the querySelector() method to select elements including the input text, button, and selection box:
Second, attach the click event listener to the btnAdd button.
If the value of the input text is blank, we show an alert to inform the users that the name is required. Otherwise, we create a new option and add it to the selection box. After adding the option, we reset the entered text of the input text and set the focus to it.
Third, register a click event listener to the btnRemove button. In the event listener, we save the selected options in an array and remove each of them.