Списки вариантов (объекты Select и Option)

Одним из важных элементов интерфейса пользователя являются списки вариантов. В HTML-формах для их реализации используется контейнер <SELECT>, который вмещает в себя контейнеры<OPTION>. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибутаMULTIPLE у контейнера <SELECT> список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

С каждым контейнером <SELECT>ассоциирован объект класса Select, а с каждым дочерним контейнером <OPTION> - объект класса Option, являющийся свойством данного объекта классаSelect. Кроме того, свойством объекта класса Select является также коллекцияoptions[], объединяющая все его дочерние объекты Option. Перечислим основные свойства, методы и события, характеризующие эти объекты.

Объект Select
Свойства	Методы			Обработчики событий
options[] size length multiple selectedIndex	focus() blur() add() remove()			onBlur onChange onFocus
Объект Option
Свойства		Методы	События
defaultSelected selected index text value		нет	нет

Мы не будем описывать все свойства, методы и события этих двух объектов. Остановимся только на типичных способах применения их комбинаций.

Создание объектов Option

Объект класса Option интересен тем, что в отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект класса Option:

opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);

где аргументы соответствуют свойствам обычных объектов класса Option:

• text - строка текста, которая размещается в контейнере <OPTION>(например: <OPTION> текст </OPTION> );

• value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option ;

• defaultSelected - выбрана ли эта альтернатива по умолчанию ( true /false );

• selected - альтернатива была выбрана пользователем ( true / false ).

На первый взгляд не очень понятно, для чего может понадобиться программисту такой объект, ведь создать объект класса Select нельзя и, следовательно, нельзя приписать ему новый объект Option. Все объясняется, когда речь заходит об изменении списка альтернатив у имеющегося в документе объекта Select. Делать это можно, при этом изменение списка альтернатив Select не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню ( options[] ).

При программировании альтернатив следует обратить внимание на то, что у объектов класса Option нет свойства name, в виду того, что у контейнера<OPTION> нет атрибута NAME. Таким образом, к встроенным в документ объектам класса Option можно обращаться только как к элементам коллекции options[].