Работа с элементом Select в JS

Один из наиболее часто используемых элементов на веб-страницах, помимо checkbox и radiobutton – это выпадающие списки. Давайте научимся работать с данными элементами. Для того, чтобы добавить выпадающий список используется код HTML:

Результат:

В качестве события для проверки изменения состояния элемента будем использовать событие onchange

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

Код проверки выбранной опции очень простой. Для начала получаем элемент по Id, а затем проверяем его свойство selectedIndex. Все это можно записать одной строкой:

Давайте проверим работоспособность кода:

See the Pen select, js by Alex (@luschenko) on CodePen.

Для того, чтобы вывести опцию записанную между тегами options можно использовать запись следующего вида:

See the Pen select, js, value, option by Alex (@luschenko) on CodePen.

В данной записи получаем индекс выбранного элемента, а запись var options=document.getElementById(‘mySelect’).options — возвращает массив опций выпадающего списка. Запись options[sel].text выводит текст между тегов option выбранного элемента.

Читайте также статью о работе с элементами radio button.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *