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;"> <!--обработка jnClick внутри тега-->
<INPUT TYPE="button" VALUE="Посмотрим" onClick="btnClick();"> <!--обработка jnClick функцией-->
</FORM>
</body>
</html>
Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибутаVALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.
Пример
<html>
<head>
</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://www.mgupi.ru/"></A>
<A HREF="http://www.rambler.ru/"></A>
<A HREF="http://www.google.ru/"></A>
<A HREF="http://www.yandex.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>
Поле ввода (text)
Свойства
name. Имя объекта.
defaultValue. Начальное содержимое поля.
value. Текущее содержимое поля.
Методы
focus( ). Передает полю фокус ввода.
blur( ). Отбирает у поля фокус ввода.
select( ). Выделяет содержимое поля.
Пример
<html>
<head>
<script type="text/javascript">
<!--
function Complete()
{
Elem="Фамилия: " + Sel.Family.value +
"\nИмя: " + Sel.Name.value +
"\nВозраст: " + Sel.Age.value +
"\nТелефон: " + Sel.Phone.value;
alert(Elem);
}
function CheckAge(age)
{
if(age<18)
return "18";
else
return
age;
}
//-->
</script>
</head>
<body lang=RU>
<H1>Заполните анкету</H1>
<FORM NAME="Sel">
<!-- Анкета -->
<TABLE>
<TR><TD><B>Фамилия:<B></TD><TD><INPUT NAME="Family" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Имя:<B></TD><TD><INPUT
NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Возраст:<B></TD><TD><INPUT NAME="Age" SIZE=3
VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<TR><TD><B>Телефон:<B></TD><TD><INPUT NAME="Phone"
SIZE=10></TD></TR>
</TABLE>
<!-- Кнопки готовности и сброса -->
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.