Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





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

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


Просмотров: 34968

  Коментарии (10)
 1 Написал(а) Эльдар, в 00:03 12.03.2009
:) Прикольно) Спасибо большое!!!
 2 Написал(а) Евгений, в 12:32 19.04.2009
А если же ,к примеру, данный список будет в форме регистрации, и надо будет его обязательно указать, то как сделать проверку на заполнение?(Т.е. если не выбран предмет, то будет выводиться окно "Предмет не выбран")
 3 Написал(а) нууб, в 09:03 21.05.2009
о пабибо помогло :p
 4 Написал(а) О_о, в 17:01 17.05.2010
а я всегда думал что это выпадающий список....
 5 Написал(а) Зая, в 01:44 19.05.2011
Спасибо большое :)
 6 Написал(а) Костя Ольмезов, в 23:44 23.08.2011
Для взятия testnumber лучше использовать switch. 
switch(testnumber) 

case 0: 
testname="MaT.анализ"; 
break; 
case 1: 
testname="Квантовая физика"; 
case 2: 
testname="Биология"; 
break; 
case 3: 
testname="Органическая химия"; 

Или хотя бы просто else if. Вот так вот: 
 
if (testnumber==0) 
testname="MaT.анализ"; 
else if (testnumber==1) 
testname="Квантовая физика"; 
else if (testnumber==2) 
testname="Биология"; 
else if (testnumber==3) 
testname="Органическая химия"; 
 
А за материал по спискам спасибо.
 7 Написал(а) Вит, в 01:50 28.03.2012
А, как сделать элементы списка ссылками? :?
 8 Написал(а) bsi, в 15:28 20.10.2014
Как с помощью раскрывающегося списка скрыть/показать объект. 
К примеру выбираем "срыть" таблица скрыта, выбираем "показать" таблица на экране. 
Что надо сделать, чтобы элемент поле со списком выводился только на экран, а на печать не выводился?
 9 Написал(а) bsi, в 16:05 20.10.2014
Сам и ответил. 
function myselection() { 
var testname, testnumber; 
testnumber=document.all.TEST.selectedIndex 
if (testnumber==0) 
Tablica.style.display = "none" 
else{ 
if (testnumber==1) 
Tablica.style.display = "inline" 

}
 10 Написал(а) Malinda, в 06:15 17.05.2017
Heck yeah bayb-ee keep them coming!

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама