Select
Списки и падающие меню
Одним из важных элементов интерфейса пользователя является меню. В HTML-формах для реализации меню используются поля типа select(контейнер SELECT, который, в свою очередь, вмещают в себя контейнеры OPTION). Эти поля представляют собой списки вариантов выбора. При этом список может "выпадать" или скролиться внутри окна. Поля типа select позволяют выбрать из списка только одну альтернативу, либо отметить несколько альтернатив. Для управления полями типа select в JavaScript существует объекты SELECT и OPTION.
Эти объекты характеризуются следующими свойствами, методами и событиями:
| нет
нет |
Мы не будем описывать всех свойств, методов и событий этих двух объектов. Остановимся только на типовых способах применения их комбинаций. Не смотря на то, что объект OPTION в нашей таблице находится ниже, что отражает его подчиненное по отношению к SELECT положение, начнем с описания применения его свойств и особенностей.
Объект OPTION
Объект OPTION интересен тем, что в отличие от многих других объектов JavaScript OPTION имеет конструктор. Это означает, что программист может сам создать объект OPTION:
opt = new Option( [ text, [ value, [ defaultSelected, [ selected ] ] ] ]);
text - строка текста, которая размещается в контейнере LI (<li>text)
value - значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
defaultSelected - альтернатива выбрана по умолчанию(true/false)
selected - альтернатива выбрана(true/false)
На первый взгляд не очень понятно для чего может программисту понадобится такой объект, ведь создать объект типа Select нельзя и, следовательно, нельзя приписать ему новый объект OPTION. Все становится понятным, когда речь заходит об изменении списка альтернатив встроенных в документ объектов SELECT. Делать это можно, т.к. изменение списка альтернатив SELECT не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню(options[]).
При программировании альтернатив( объект OPTION) следует обратить внимание на то, что среди свойств OPTION нет свойства name. Это означает, что к объекту нельзя обратиться по имени. Отсутствие свойства объясняется тем, что у контейнера OPTION нет атрибута name. К встроенным в документ объектам OPTION можно обращаться только как к элементам массива options[] объекта SELECT.
начало страницы
options[]
Массив options[] - это свойство объекта SELECT. Элементы этого массива обладают теми же свойствами, что и объекты OPTION. Собственно, это и есть объекты OPTION, встроенные в документ. Они создаются по мере загрузки страницы браузером. Программист имеет возможность не только создавать новые объекты OPTION, но и удалять уже созданные браузером:
<form name=f0>
<select name=s0>
<option>Первая альтернатива
<option>Вторая альтернатива
<option>Третья альтернатива
</select>
<input type=button value="Delete last option" onClick="document.f0.s0.options[document.f0.s0.length-1]=null;">>
<input type=reset value=Reset>
</form>
альтернатива Один
альтернатива Два
альтернатива Три
В данном примере при загрузке страницы с сервера определено три альтернативы. Они появляются, если выбрать поле SELECT. После нажатия на кнопку удаления последней альтернативы("Delete last option") остается только две альтернативы. Если еще раз нажать на кнопку удаления альтернативы, то останется только одна альтернатива и т.д.. В конечном счете, может остаться 0 альтернатив, т.е. вообще пользователь лишится всякого выбора. Кнопка Reset показывает, что альтернативы утеряны бесследно, т.к. после нажатия на эту кнопку содержание поля SELECT не восстанавливается.
Теперь используя конструктор OPTION сделаем процесс обратимым:
function def_f1()
{
document.f1.s1.options[0] = new Option("альтернатива Один","",true,true);
document.f1.s1.options[1] = new Option("альтернатива Два");
document.f1.s1.options[2] = new Option("альтернатива Три");
return false;
}
...
<form name=f1 onReset="def_f1();">
<select name=s1>
<option>альтернатива Один
<option>альтернатива Два
<option>альтернатива Три
</select>
<input type=button value="Delete last option" onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">
<input type=reset value=Reset>
</form>
альтернатива Один
альтернатива Два
альтернатива Три
В данном случае мы обрабатываем событие reset(контейнер FORM). При этом создаем новые объекты типа OPTION и подчиняем их объекту SELECT. При этом первый элемент массива должен быть выбран по умолчанию, чтобы промоделировать поведение при начальной загрузке страницы.
В HTML-формах нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и реализовать замену, путем программирования поля Select:
Заказ автомашин Горьковского и Волжского автозаводов
Фирма производитель:
ГАЗ
ВАЗ
Модель:
3102-111
3102-311
31021
3110
Сделан заказ на модель:
В данном примере список моделей автомобилей меняется в зависимости от выбора завода-производителя. Назначение и обновление списка построены по тому же принципу, что и в предыдущем примере с восстановлением значений умолчания, поэтому текст программ мы не приводим. Но с ним, естественно можно ознакомиться, если посмотреть на HTML-разметку этой страницы.
начало страницы
length
В примерах перепрограммирования options[] активно используется свойство объекта SELECT length. Оно определяет количество альтернатив определенных для поля выбора. При помощи этого свойства мы удаляли и восстанавливали списки моделей в примере с автомобилями.
Определим число моделей автомобилей Горьковского автозавода посредством этого свойства:
<form name=f3>
Число предложенных моделей: <nput name=i0 size=1 maxlength=1 onFocus="out();">
</form>
<script>
document.f3.i0.value=document.f2.s1.length;
</script>
Число предложенных моделей:
document.f3.i0.value=document.f2.s1.length;
Обратите внимание на контейнер SCRIPT. Он расположен вслед за формой. Если его расположить раньше, то поля формы будут не определены, и мы получим ошибку.
начало страницы
selectedIndex
Свойство объекта SELECT, которое возвращает значение выбранной альтернативы, обозначается как selectedIndex. Это свойство мы уже использовали в примере с автомобилями. Там по этому индексу мы определяли, модель которого из двух автозаводов выбирает пользователь:
<form>
Автозавод:
<select name=s0 onChange="form.elements[1].value=selectedIndex;">
<option>ГАЗ
<option>ВАЗ
</select>
Выбрали индекс:
<input size=1 maxlength=1>
</form>
Автозавод:
ГАЗ
ВАЗ
Выбрали индекс:
В этом примере обратите внимание на обработчики событий. Сам обработчик onChange мы опишем позже. Главное сейчас не это. Обратите внимание на то, как мы обращаемся к элементам текущей формы. Во-первых, мы используем свойство form объекта SELECT. Мы его специально не обсуждали. Оно указывает на объект FORM, к которому принадлежит поле. Во-вторых, мы ссылаемся на второй элемент формы. К данному моменту он не определен, но событие произойдет только тогда, когда будем выбирать альтернативы. К этому моменту поле уже будет определено. В-третьих, мы ссылаемся на selectedIndex, не указывая полного имени формы. В данном контексте он относится к текущей форме.
начало страницы
onChange
Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте SELECT. С изменением этого индекса в полях выбора одной единственной альтернативы на данной странице мы сталкивались неоднократно(selectedIndex и options[]). Данное событие обрабатывается JavaScript-программой, которая указывается в атрибуте onChange контейнера SELECT. В этом контексте интересно посмотреть на то, что происходит, когда мы имеем дело с multiple контейнером select:
<form>
Набор канцелярских товаров:
<select
onChange=
"form.elements[1].value='';
for(i=0;i
if(form.elements[0].options[i].selected==true)
form.elements[1].value = form.elements[1].value+i;"
multiple>
<option>Карандаши
<option>Авторучки
<option>Линейки
<option>Тетради
<option>Стерки
<option>Кнопки
<option>Скрепки
</select>
Выбраны позиции:
<input name=s1 size=7 maxlength=7 onFocus="form.elements[1].blur();">
</form>
|
Набор канцелярских товаров: |
Карандаши Авторучки Линейки Тетради Стерки Кнопки Скрепки |
| Выбраны позиции: |
начало страницы
selected
Свойство selected объекта OPTION, на котором был построен пример с канцелярскими принадлежностями, может принимать два значения: истина(true) или ложь(false). В примере мы распечатываем индекс выбранной альтернативы, если значение свойства selected у объекта OPTION - true:
if(form.elements[0].options[i].selected==true) ...
Вообще говоря, свойство selected интересно именно в случае поля множественного выбора. В случае выбора единственной альтернативы ее можно получить указанием на свойство selectedIndex объекта SELECT.
начало страницы
text
Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе:
<select
onChange=
"form.elements[2].value=form.elements[0].options
[form.elements[0].selectedIndex].text;"
>
...
</select>
Список канцелярских принадлежностей:
Карандаши
Авторучки
Линейки
Тетради
Стерки
Кнопки
Скрепки
Выбрали из списка:
В данном примере свойство text выводится в текстовое поле формы.
