HTMLSelectElement

Интерфейс HTMLSelectElement представляет собой HTML-элемент <select>. Эти элементы также наследуют все свойства и методы других HTML-элементов через интерфейс HTMLElement.

Этот интерфейс наследует свойства HTMLElement, Element и Node.

HTMLSelectElement.disabled

Булево значение, отражающее атрибут HTML disabled, указывающее, заблокирован ли элемент управления. Если элемент заблокирован, он не реагирует на щелчки.

HTMLSelectElement.form Только для чтения

Объект HTMLFormElement, ссылающийся на форму, к которой связан этот элемент. Если элемент не связан с элементом <form>, возвращает null.

HTMLSelectElement.labels Только для чтения

Список NodeList элементов <label>, связанных с этим элементом.

HTMLSelectElement.length

Числовое значение. Количество элементов <option> в элементе select.

HTMLSelectElement.multiple

Булево значение, отражающее атрибут HTML multiple, указывающее, можно ли выбрать несколько элементов.

HTMLSelectElement.name

Строка, отражающая атрибут HTML name, содержащая имя этого элемента управления, используемое серверами и функциями поиска DOM.

HTMLSelectElement.options Только для чтения

Объект HTMLOptionsCollection, представляющий набор элементов <option> (HTMLOptionElement), содержащихся в этом элементе.

HTMLSelectElement.required

Булево значение, отражающее атрибут HTML required, указывающее, требуется ли пользователю выбрать значение перед отправкой формы.

HTMLSelectElement.selectedIndex

Числовое значение, отражающее индекс первого выбранного элемента <option>. Значение -1 указывает, что ни один элемент не выбран.

HTMLSelectElement.selectedOptions Только для чтения

Объект HTMLCollection, представляющий набор выбранных элементов <option>.

HTMLSelectElement.size

Числовое значение, отражающее атрибут HTML size, содержащее количество видимых элементов в элементе управления. По умолчанию значение равно 1, если multiple равно true, тогда значение равно 4.

HTMLSelectElement.type Только для чтения

Строка, представляющая тип элемента управления формы. Когда multiple равно true, возвращает "select-multiple", в противном случае возвращает "select-one".

HTMLSelectElement.validationMessage Только для чтения

Строка, представляющая локализованное сообщение, описывающее ограничения валидации, которым не удовлетворяет элемент управления (если таковые имеются). Этот атрибут пустая строка, если элемент управления не является кандидатом для проверки ограничений (willValidate равно false) или удовлетворяет своим ограничениям.

HTMLSelectElement.validity Только для чтения

Объект ValidityState, отражающий состояние валидности этого элемента управления.

HTMLSelectElement.value

Строка, отражающая значение элемента управления формы. Возвращает свойство value первого выбранного элемента option, если таковой имеется, в противном случае возвращает пустую строку.

HTMLSelectElement.willValidate Только для чтения

Булево значение, указывающее, является ли кнопка кандидатом для проверки ограничений. Значение равно false если какие-либо условия препятствуют проверке ограничений.

Этот интерфейс наследует методы HTMLElement, Element и Node.

HTMLSelectElement.add()

Добавляет элемент в коллекцию элементов option для этого элемента select.

HTMLSelectElement.checkValidity()

Проверяет, имеет ли элемент ограничения и удовлетворяет ли он им. Если элемент не удовлетворяет ограничениям, браузер вызывает отменяемое событие invalid в элементе (и возвращает false).

HTMLSelectElement.item()

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

HTMLSelectElement.namedItem()

Возвращает элемент в коллекции options с указанным именем. Строка имени может соответствовать атрибуту id или name узла option. Вы также можете получить доступ к элементу, указав его имя в квадратных или круглых скобках, не вызывая этот метод явно.

HTMLSelectElement.remove()

Удаляет элемент с указанным индексом из коллекции options для этого элемента select.

HTMLSelectElement.reportValidity()

Этот метод сообщает пользователю о проблемах с ограничениями элемента, если таковые имеются. Если есть проблемы, он вызывает отменяемое событие invalid в элементе и возвращает false; если проблем нет, возвращает true.

HTMLSelectElement.setCustomValidity()

Устанавливает пользовательское сообщение валидации для элемента выбора на указанное сообщение. Используйте пустую строку, чтобы указать, что у элемента нет ошибки пользовательской валидации.

showPicker()

Отображает выборщик опций.

Этот интерфейс наследует события HTMLElement, Element и Node.

Следите за этими событиями с помощью addEventListener() или присвоив обработчик событий свойству oneventname этого интерфейса:

change событие

Срабатывает, когда пользователь выбирает опцию.

input событие

Срабатывает, когда value элемента <input>, <select> или <textarea> изменен.

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

const select = document.getElementById("s");

// return the index of the selected option
console.log(select.selectedIndex); // 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value); // Second

Лучший способ отслеживания изменений в выборе пользователя — наблюдение за событием change на <select>. Это сообщит вам о изменении значения, и вы сможете обновить необходимые данные. Подробнее см. пример в документации для события change.

• Элемент HTML <select>, который реализует этот интерфейс.