Function btnClick()

{

sI=Test.Item.selectedIndex;

Txt="";

Txt="Предложено

"+Test.Item.length+" напитков"+

"\nВыбран "+Test.Item.options[sI].text+

" (value= "+Test.Item.options[sI].value+

", index= "+Test.Item.options[sI].index+")";

if(Test.Item.options[sI].defaultSelected)

{Txt+="\nЭтот напиток выбирается по

умолчанию"}

alert(Txt);

}

//-->

</script>

</head>

<body lang=RU>

<H1>Работа с готовым списком</H1>

<FORM NAME="Test">

<SELECT NAME="Item" SIZE=5>

<OPTION VALUE="tea" SELECTED>Чай

<OPTION VALUE ="coffee">Кофе

<OPTION VALUE ="milk">Молоко

<OPTION VALUE ="cocoa">Какао

<OPTION VALUE ="juice">Сок

</SELECT>

<INPUT TYPE="button" VALUE="Пусть кофе"

onClick="Test.Item.options[1].selected=true;">

<INPUT TYPE="button" VALUE="Посмотрим"

onClick="btnClick();">

</FORM>

</body>

</html>

Работа с готовым списком

Начало формы

Чай Кофе Молоко Какао Сок

Конец формы

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибутаVALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.

Пример

<html>

<head>

<meta http-equiv=Content-Type content="text/html;

charset=windows-1251">

</head>

<body lang=RU>

<H1>Динамическое заполнение списка</H1>

<FORM NAME="Sel">

<SELECT NAME="ListOfLinks">

</SELECT>

<INPUT TYPE="button" VALUE="Переход"

onClick="window.location.href =

document.links[Sel.ListOfLinks.selectedIndex];">

</FORM>

<A HREF="http://tnk-ug.ru/kdg/"></A>

<A HREF="http://www.dstu.edu.ru/"></A>

<A HREF="http://www.tnk-ug.ru/"></A>

<A HREF="http://www.dmm.ru/"></A>

<script type="text/javascript">

<!--

// Цикл по всем ссылкам

for(i=0; i<document.links.length; i++)

{

// Создание i-элемента списка и запись в него ссылки

document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false,

false);

}

// Выделение первого элемента в списке

document.Sel.ListOfLinks.selectedIndex = 0;

//-->

</script>

</body>

</html>

Динамическое заполнение списка

Начало формы

http://htmlweb.ru/java/js.php http://htmlweb.ru/java/js.php http://htmlweb.ru/java/js.php http://htmlweb.ru/ http://htmlweb.ru/ http://htmlweb.ru/html/ http://htmlweb.ru/java/ http://htmlweb.ru/php/ http://htmlweb.ru/xml/ http://htmlweb.ru/ajax/ http://htmlweb.ru/service/ http://htmlweb.ru/download/ http://htmlweb.ru/other/ http://htmlweb.ru/java/js.php# http://htmlweb.ru/sitemap/ http://htmlweb.ru/user/signup.php http://htmlweb.ru/user/remember.php http://htmlweb.ru/java/js.php#Array http://htmlweb.ru/java/js.php#Date http://htmlweb.ru/java/js.php#Window http://htmlweb.ru/java/js.php#Document http://htmlweb.ru/java/js.php#Form http://htmlweb.ru/java/js.php#Cookie http://htmlweb.ru/java/js1.php http://htmlweb.ru/java/js1.php http://htmlweb.ru/java/js2.php http://htmlweb.ru/java/js2.php http://htmlweb.ru/java/js3.php http://htmlweb.ru/java/js3.php http://htmlweb.ru/java/js4.php http://htmlweb.ru/java/js4.php http://htmlweb.ru/java/js5.php http://htmlweb.ru/java/js5.php http://htmlweb.ru/java/js6.php http://htmlweb.ru/java/js6.php http://htmlweb.ru/java/js7.php http://htmlweb.ru/java/js7.php http://kdg.htmlweb.ru/ http://www.dstu.edu.ru/ http://www.moidomovenok.ru/ http://www.vsetaksi.ru/

Конец формы

Поле ввода (TEXT)