Объект select отображается как простой или ниспадающий список и является элементом формы, определенной в HTML-документе. Элементам списка, заданного в объекте select, соответствует массив options. Объекты select представляют собой свойства объекта form, в то время как массив options является свойством объекта select.

Какое пиво лучше? Жигулевское Очаковское Бочкарев Балтика

Подобные меню можно часто увидеть для навигации по сайту, например.

Синтаксис тега <select>

<select name="selectName"

[size="integer"]

[multiple]

[OnBlur="handlerText"]

[OnChange="handlerText"]

[OnFocus="handlerText"]>

<option value="optionValue" [selected]> textToDisplay

</select>

Атрибут name задает имя объекта select, который имеет одноименное свойство. Значением атрибута size является количество строк, отображаемых в списке, хотя содержаться может больше. С помощью атрибута multiple можно выбрать несколько элементов списка. Для ниспадающих списков атрибуты size и multiple не определяются.

Контейнер <select> . . . </select> не используется без тегов <option>, поскольку эти эти теги задают элементы списка. Количество элементов в списке не ограничивается. Атрибут value тега <option> представляет значение, которое пересылается серверу при передачи формы. Атрибуту value соответствует свойство объекта select с таким же именем. Список может содержать элементы, выбранные по умолчанию, что задается при помощи атрибута selected. В программе на JavaScript элементы, выбранные по умолчанию, определяются значением свойства defaultSelected объекта option. Текст для элементов списка необходимо задать в строке textToDisplay. Кроме того, каждому элементу списка соответствует конкретное значение, устанавливаемое в атрибуте value тега <option>. Для обращения к свойствам и методам объекта select используются выражения типа:

o selectName.propertyName

o selectName.methodName(parameters)

o formName.elements[i].propertyName

o tformName.elements[i].methodName(parameters)

где selectName - имя объекта select, заданное в атрибуте name тега <select>, а formName- имя формы, элементом которой является объект select.

К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида:

o selectName.options[i].propertyName

o formName.elements[i].options[index].propertyName

где selectName - имя, заданное в атрибуте name тега <select>, а formName - имя формы, в которой определен данный объект select.

Массив options

Элементам списка, определенным в тегах <option>, в JavaScript соответствуют элементы массива options, массив является свойством объекта select. Если тег <select> с именем beer содержит два тега <option>, в JS им соответствуют элементы beer.options[0] и beer.options[1].

Массив options, в свою очередь, имеет свойство length. Значение этого свойства - количество тегов <option> в заданном объекте select. Например, выражение beer.options.length будет возвращать значение 2.

Свойства

Объект select имеет свойства:

o length - количество тегов <option>, заданных в теге <select>

o name - соответствует атрибуту name тега <select>

o options - массив значений тегов <option>

o selectIndex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого;

o type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"

Теперь рассмотрим свойства для массива options:

o defaultSelected - соответствует первому тегу <option>, определенному с атрибутом selected;

o index - номер даннго элемента в массиве;

o length - количество элементов в списке объекта select;

o selected - не равное нулю, если данный элемент списка выбран

o selectedIndex - содержит индекс выбранного элемента

o text - соответствует тексту, который указан в теге <option>

o value - соответствует атрибуту value тега <option>