Примеры сценариев, работающих со списками

В этом разделе мы приведем два примера сценариев, работающих со списками. Первый из этих примеров предназначен для работы с готовым списком, заполненным заранее, второй заполняет список динамически.
Работа с готовым списком
При работе со списками из сценария JavaScript чаще всего требуется определить, какие элементы были выбраны пользователем.
размера некоторого предмета (в данном случае не имеет значение, какого именно).
Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка. Что же касается первого списка, то для того чтобы выбрать из него нужный цвет, необходимо сделать щелчок по кнопке с треугольником. При этом список раскроется.
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.
Исходный текст документа HTML, содержащего форму и сценарий для ее обработки, представлен в листинге 3.3.
Листинг 3.3. Файл chapter3/select/select.php

Работа со списками

Работа со списками

Выберите цвет:

Черный
Белый
Красный
Оранжевый
Желтый
Зеленый
Голубой
Синий
Фиолетовый

Выберите размер:

Стандартный
Большой
Средний
Маленький
Очень маленький

Как видно из этого листинга, в документе определена форма с именем Sel, содержащая списки ColorList и SizeList. Во втором списке мы задали размер видимой части, указав в операторе параметр 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 оператора .
Динамическое заполнение списка
Сценарий JavaScript может изменять список, добавляя в него новые элементы. Пример такого сценария мы уже приводили в разделе второй главы с названием “Ссылки и метки в документе”. Мы предлагаем вам обратиться к этому разделу еще раз.
Напомним, что там мы создали в документе HTML пустой список с именем ListOfLinks, расположив его в форме Sel:

Перед заполнением этого списка мы создали массив элементов elem:
elem = new Array();
Заполнение этого массива выполнялось в цикле, причем для создания элемента массива мы вызывали конструктор Option, задавая для него четыре параметра:
elem[i] = new Option("Elem" + i, i, false, false);
Первый параметр задает текст, который отображается в списке, второй - значение, назначаемое элементу списка при помощи параметра VALUE. Третий и четвертый параметры соответствуют свойствам, соответственно, defaultSelected и selected.
Переменная i - это параметр цикла, изменяющий свое значение от нуля и до количества элементов, добавляемых в список.
После того как элемент списка создан как объект класса option, его нужно записать в соответствующий элемент массива options:
Sel.ListOfLinks.options[i] = elem[i];
Sel.ListOfLinks.options[i].text = document.links[i];
Здесь мы также дополнительно устанавливаем значение для свойства text элемента этого массива, записывая текст, который должен отображаться в списке.
Определение выбранного из нашего списка элемента выполняется аналогично тому, как это сделано в предыдущем примере:
function urlJump()
{
var szNewURL="";
szNewURL =
document.links[Sel.ListOfLinks.selectedIndex];
window.location.href=szNewURL;
}
Вначале мы определяем номер выбранного элемента как значение Sel.ListOfLinks.selectedIndex. Затем это значение используется как индекс в массиве document.links, из которого в цикле происходило заполнение нашего списка.