Одним из важных элементов интерфейса пользователя является меню. В HTML-формах для реализации меню используются поля типа select(контейнер SELECT, который, в свою очередь, вмещают в себя контейнеры OPTION). Эти поля представляют собой списки вариантов выбора. При этом список может "выпадать" или скролиться внутри окна. Поля типа select позволяют выбрать из списка только одну альтернативу, либо отметить несколько альтернатив. Для управления полями типа select в JavaScript существует объекты SELECT и OPTION.
Эти объекты характеризуются следующими свойствами, методами и событиями:
Объект SELECT | ||
---|---|---|
Свойства | Методы | События |
|
|
|
Объект OPTION | нет | нет |
Мы не будем описывать всех свойств, методов и событий этих двух объектов. Остановимся только на типовых способах применения их комбинаций. Не смотря на то, что объект OPTION в нашей таблице находится ниже, что отражает его подчиненное по отношению к SELECT положение, начнем с описания применения его свойств и особенностей.
Объект OPTION
Объект OPTION интересен тем, что в отличие от многих других объектов JavaScript OPTION имеет конструктор. Это означает, что программист может сам создать объект OPTION:
На первый взгляд не очень понятно для чего может программисту понадобится такой объект, ведь создать объект типа Select нельзя и, следовательно, нельзя приписать ему новый объект OPTION. Все становится понятным, когда речь заходит об изменении списка альтернатив встроенных в документ объектов SELECT. Делать это можно, т.к. изменение списка альтернатив SELECT не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню(options[]).
При программировании альтернатив(объект OPTION) следует обратить внимание на то, что среди свойств OPTION нет свойства name. Это означает, что к объекту нельзя обратиться по имени. Отсутствие свойства объясняется тем, что у контейнера OPTION нет атрибута name. К встроенным в документ объектам OPTION можно обращаться только как к элементам массива options[] объекта SELECT.
options[]
Массив options[] - это свойство объекта SELECT. Элементы этого массива обладают теми же свойствами, что и объекты OPTION. Собственно, это и есть объекты OPTION, встроенные в документ. Они создаются по мере загрузки страницы браузером. Программист имеет возможность не только создавать новые объекты OPTION, но и удалять уже созданные браузером:
В данном примере при загрузке страницы с сервера определено три альтернативы. Они появляются, если выбрать поле SELECT. После нажатия на кнопку удаления последней альтернативы("Delete last option") остается только две альтернативы. Если еще раз нажать на кнопку удаления альтернативы, то останется только одна альтернатива и т.д.. В конечном счете, может остаться 0 альтернатив, т.е. вообще пользователь лишится всякого выбора. Кнопка Reset показывает, что альтернативы утеряны бесследно, т.к. после нажатия на эту кнопку содержание поля SELECT не восстанавливается.
Теперь используя конструктор OPTION сделаем процесс обратимым:
В данном случае мы обрабатываем событие reset(контейнер FORM). При этом создаем новые объекты типа OPTION и подчиняем их объекту SELECT. При этом первый элемент массива должен быть выбран по умолчанию, чтобы промоделировать поведение при начальной загрузке страницы.
В HTML-формах нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и реализовать замену, путем программирования поля Select:
В данном примере список моделей автомобилей меняется в зависимости от выбора завода-производителя. Назначение и обновление списка построены по тому же принципу, что и в предыдущем примере с восстановлением значений умолчания, поэтому текст программ мы не приводим. Но с ним, естественно можно ознакомиться, если посмотреть на HTML-разметку этой страницы.
length
В примерах перепрограммирования options[] активно используется свойство объекта SELECT length. Оно определяет количество альтернатив определенных для поля выбора. При помощи этого свойства мы удаляли и восстанавливали списки моделей в примере с автомобилями.
Определим число моделей автомобилей Горьковского автозавода посредством этого свойства:
Обратите внимание на контейнер SCRIPT. Он расположен вслед за формой. Если его расположить раньше, то поля формы будут не определены, и мы получим ошибку.
selectedIndex
Свойство объекта SELECT, которое возвращает значение выбранной альтернативы, обозначается как selectedIndex. Это свойство мы уже использовали в примере с автомобилями. Там по этому индексу мы определяли, модель которого из двух автозаводов выбирает пользователь:
В этом примере обратите внимание на обработчики событий. Сам обработчик onChange мы опишем позже. Главное сейчас не это. Обратите внимание на то, как мы обращаемся к элементам текущей формы. Во-первых, мы используем свойство form объекта SELECT. Мы его специально не обсуждали. Оно указывает на объект FORM, к которому принадлежит поле. Во-вторых, мы ссылаемся на второй элемент формы. К данному моменту он не определен, но событие произойдет только тогда, когда будем выбирать альтернативы. К этому моменту поле уже будет определено. В-третьих, мы ссылаемся на selectedIndex, не указывая полного имени формы. В данном контексте он относится к текущей форме.
onChange
Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте SELECT. С изменением этого индекса в полях выбора одной единственной альтернативы на данной странице мы сталкивались неоднократно(selectedIndex и options[]). Данное событие обрабатывается JavaScript-программой, которая указывается в атрибуте onChange контейнера SELECT. В этом контексте интересно посмотреть на то, что происходит, когда мы имеем дело с multiple контейнером select:
Обратите внимание на то, когда происходит событие change. Оно происходит каждый раз, когда происходит выбор или отмена альтернативы. Исключение составляет только последовательный выбор альтернатив отмечанием. В этом случае событие происходит в момент отпуска кнопки мыши, и все отмеченные альтернативы становятся выбранными.
selected
Свойство selected объекта OPTION, на котором был построен пример с канцелярскими принадлежностями, может принимать два значения: истина(true) или ложь(false). В примере мы распечатываем индекс выбранной альтернативы, если значение свойства selected у объекта OPTION - true:
Вообще говоря, свойство selected интересно именно в случае поля множественного выбора. В случае выбора единственной альтернативы ее можно получить указанием на свойство selectedIndex объекта SELECT.
text
Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе:
В данном примере свойство text выводится в текстовое поле формы.
value
При передаче данных от браузера к серверу в запросе реально передается текст выбранной опции, если не было указано значение в атрибуте value контейнера OPTION.