Простейшее меню можно создать с помощью тегов <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 = количество_видимых_элементов.