Результат:
Метод click группы переключателей
Начало формы
Мужской
Женский
Состояние переключателей можно изменить и этой кнопкой
Конец формы
Список (SELECT)
Свойства
name. Имя объекта.
selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибутMULTIPLE).
length. Количество элементов (строк) в списке.
options. Массив элементов списка, заданных тегами OPTION.
Каждый элемент массива options является объектом со следующими свойствами:
value. Значение атрибута VALUE.
text. Текст, указанный после тега OPTION.
index. Индекс элемента списка.
selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.
Методы
focus( ). Передает списку фокус ввода.
blur( ). Отбирает у списка фокус ввода.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
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 LANGUAGE="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>