Один из наиболее часто используемых элементов на веб-страницах, помимо checkbox и radiobutton – это выпадающие списки. Давайте научимся работать с данными элементами. Для того, чтобы добавить выпадающий список используется код HTML:
|
1 2 3 4 5 6 |
<select id="mySelect"> <option>Apple</option> <option>Orange</option> <option>Pineapple</option> <option>Banana</option> </select> |
Результат:
В качестве события для проверки изменения состояния элемента будем использовать событие onchange
|
1 |
<select id="mySelect" onchange="fun1()"> |
Особенностью данного элемента является свойство selectedIndex которое возвращает индекс выбранной опции списка. Обратите внимание, что нумерация списка начинается с нуля.
Код проверки выбранной опции очень простой. Для начала получаем элемент по Id, а затем проверяем его свойство selectedIndex. Все это можно записать одной строкой:
|
1 |
var sel=document.getElementById('mySelect').selectedIndex; |
Давайте проверим работоспособность кода:
|
1 2 3 4 |
function fun1() { var sel=document.getElementById('mySelect').selectedIndex; alert('Выбрана опция '+sel); } |
See the Pen select, js by Alex (@luschenko) on CodePen.
Для того, чтобы вывести опцию записанную между тегами options можно использовать запись следующего вида:
|
1 2 3 4 5 |
function fun1() { var sel=document.getElementById('mySelect').selectedIndex; var options=document.getElementById('mySelect').options; alert('Выбрана опция '+options[sel].text+' '+options[sel].value); } |
See the Pen select, js, value, option by Alex (@luschenko) on CodePen.
В данной записи получаем индекс выбранного элемента, а запись var options=document.getElementById(‘mySelect’).options — возвращает массив опций выпадающего списка. Запись options[sel].text выводит текст между тегов option выбранного элемента.
Читайте также статью о работе с элементами radio button.
