Работа с готовым списком
При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем. На рис. 3.6 мы показали форму, в которой расположены два списка.
Рис. 3.6. Форма с двумя списками различного размера
Первый из этих списков предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно).
Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка. Что же касается первого списка, то для того чтобы выбрать из него нужный цвет, необходимо сделать щелчок по кнопке с треугольником. При этом список раскроется (рис. 3.7).
Рис. 3.7. Форма с раскрытым списком
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением (рис. 3.8).
Рис. 3.8. Выбранный цвет и размер
Исходный текст документа HTML, содержащего форму и сценарий для ее обработки, представлен в листинге 3.3.
Листинг 3.3. Файл chapter3/select/select.html
<HTML>
<HEAD>
<TITLE>Работа со списками</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szElement="Цвет: " +
Sel.ColorList.options[Sel.ColorList.selectedIndex].value +
" (" + Sel.ColorList.selectedIndex + ")" +
"\nРазмер: " +
Sel.SizeList.options[Sel.SizeList.selectedIndex].value +
" (" + Sel.SizeList.selectedIndex + ")";
alert(szElement);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Работа со списками</H1>
<FORM NAME="Sel">
<P>Выберите цвет:<P>
<SELECT NAME="ColorList">
<OPTION VALUE=Черный SELECTED> Черный
<OPTION VALUE=Белый> Белый
<OPTION VALUE=Красный> Красный
<OPTION VALUE=Оранжевый> Оранжевый
<OPTION VALUE=Желтый> Желтый
<OPTION VALUE=Зеленый> Зеленый
<OPTION VALUE=Голубой> Голубой
<OPTION VALUE=Синий> Синий
<OPTION VALUE=Фиолетовый> Фиолетовый
</SELECT>
<P>Выберите размер:<P>
<SELECT NAME="SizeList" SIZE=3>
<OPTION VALUE=Стандартный SELECTED> Стандартный
<OPTION VALUE=Большой> Большой
<OPTION VALUE=Средний> Средний
<OPTION VALUE=Маленький> Маленький
<OPTION VALUE=Очень_маленький> Очень маленький
</SELECT>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Как видно из этого листинга, в документе определена форма с именем Sel, содержащая списки ColorList и SizeList. Во втором списке мы задали размер видимой части, указав в операторе <SELECT> параметр SIZE со значением, равным трем. В результате, как это видно из рис. 3.6, в видимой части списка отображается три элемента.
Для кнопки с надписью Complete мы определили обработчик события onClick. Когда пользователь делает щелчок мышью по этой кнопке, вызывается функция Complete, которая определяет выбранные элементы для обоих списков и отображает их значения в диалоговой панели при помощи функции alert:
szElement="Цвет: " +
Sel.ColorList.options[Sel.ColorList.selectedIndex].value +
" (" + Sel.ColorList.selectedIndex + ")" +
"\nРазмер: " +
Sel.SizeList.options[Sel.SizeList.selectedIndex].value +
" (" + Sel.SizeList.selectedIndex + ")";
alert(szElement);
При этом прежде всего определяются номера элементов, выбранных из списков. Эти номера равны, соответственно, Sel.ColorList.selectedIndex (для списка цветов) и Sel.SizeList.selectedIndex (для списка размеров).
Далее эти номера используются как индексы в массивах options соответствующих списков, содержащих свойства элементов списков. Нас интересует свойство value, при помощи которого можно определить значение для выбранных элементов списков. Каждый элемент наших списков имеет такое значение, заданное при помощи параметра VALUE оператора <OPTION>.
