Раскрывающийся список

Home

Примеры по JavaScript

Раскрывающийся список

Простейшее меню можно создать с помощью тегов <SELECT> и <OPTION>. Обычно такие конструкции называют раскрывающимися списками. Ниже приводится простейший пример использования раскрывающегося списка. В этом примере раскрывающийся список задается HTML-кодом, а обработка выбора из этого списка — сценарием. Задача сценария заключается просто в обработке номера выбранного элемента из списка. В примере это вывод окна с соответствующим сообщением. Выбор пользователя из раскрывающегося списка производится щелчком левой кнопкой мыши на элементе списка. При этом свойство selectedIndex объекта элемента документа, соответствующего тегу <SELECT>, приобретает в качестве своего значения номер выбранного элемента списка (нумерация начинается с 0). Для инициации обработки выбора пользователя здесь служит событие onchange (произошло изменение в выделении элемента списка). Обработка этого события осуществляется функцией myselection(). Начальное выделение и ото- бражение элемента в раскрывающемся списке задается атрибутом SELECTED тега <OPTION>. В рассматриваемом примере в списке виден элемент «Физика».

<html>
Выберите экзамен, который хотите сдать:
<select NAME="TEST" onchange ="myselection()">
<option>Математика
<option selected>Физика
<option>Биология
<option>Химия
<SCRIPT>
function myselection() {
var testname, testnumber;
testnumber=document.all.TEST.selectedIndex
if (testnumber==0)
testname="MaT.анализ"
else{
if (testnumber==1)
testname="Квантовая физика"
else{
if (testnumber==2)
testname="Биология"
else
testname="Органическая химия"
}
}
alert(" ВЫ будете сдавать:" + testname)
}
</SCRIPT>
</html>

Выберите экзамен, который хотите сдать:

По умолчанию в раскрывающемся списке виден только один элемент. Чтобы раскрывающийся список сразу был приоткрытым (показывал несколько элементов), следует в теге <SELECT> указать атрибут SIZE = количество_видимых_элементов.

Коментарии (4)

1 Написал(а) Эльдар, в 00:03 12.03.2009

Прикольно) Спасибо большое!!!

2 Написал(а) Евгений, в 12:32 19.04.2009
А если же ,к примеру, данный список будет в форме регистрации, и надо будет его обязательно указать, то как сделать проверку на заполнение?(Т.е. если не выбран предмет, то будет выводиться окно "Предмет не выбран")

3 Написал(а) нууб, в 09:03 21.05.2009
о пабибо помогло