Объект select и массив options 6.4

Объект select и массив options
Объект 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
o
o
o
selectName.propertyName
selectName.methodName(parameters)
formName.elements[i].propertyName
tformName.elements[i].methodName(parameters)
где selectName - имя объекта select, заданное в атрибуте name тега <select>, а formNameимя формы, элементом которой является объект select.
К отдельным элементам списка, определенного в объекте select, можно обратиться при
помощи массива options или массива elements, используя выражения вида:
o
o
selectName.options[i].propertyName
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
o
o
o
o
length - количество тегов <option>, заданных в теге <select>
name - соответствует атрибуту name тега <select>
options - массив значений тегов <option>
selectIndex - содержит индекс выбранного элемента, а если выбрано
несколько элементов, то индекс первого;
type - для списков с возможностью выбора одного элемента содержит
значение "select-one", а для списков с возможностью выбора
нескольких элементов - значение "select-multiple"
Теперь рассмотрим свойства для массива options:
o
o
o
o
o
o
o
defaultSelected - соответствует первому тегу <option>, определенному с
атрибутом selected;
index - номер даннго элемента в массиве;
length - количество элементов в списке объекта select;
selected - не равное нулю, если данный элемент списка выбран
selectedIndex - содержит индекс выбранного элемента
text - соответствует тексту, который указан в теге <option>
value - соответствует атрибуту value тега <option>
Методы и обработчики событий
Объект select имеет методы focus() и blur(). Для объекта select можно определить
обработчики событий, соответствующие атрибутам onBlur и onChange, задавая реакцию
объекта на события, связанные с потерей и получением фокуса ввода. Используются не
часто, но всеже существуют такие задачи где эти события как раз-то и нужно применить, будем говорить о событиях в соответствующей главе.
Пример
Рассмотрим пример приведенный выше:
<script language = "JavaScript">
<!-function showSelected(a) {
var selNum = a.beer.selectedIndex;
var selText = a.beer.options[selNum].text;
alert("Выбрана ОПЦИЯ: "+ selNum + "\n" +
"Текст выбранной опции: "+ selText);
}
//-->
</script>
<form name ="Мой выбор">
Какое пиво лучше?
<select name = "beer">
<option>Жигулевское
<option selected>Очаковское
<option>Бочкарев
<option>Балтика
</select>
<P>
<input type = "button" value="Смотрим что выбрали" onClick="showSelected(this.form)">
</form>
Если вы во всем разобрались до этого примера, то комментарии и не понадобятся, но
всеже. Объект select, определенный в данном примере содержит четыре элемента. При
щелчке мыши на кнопке "Смотрим что выбрали" активизируется функция showSelected(),
которая выводит окно сообщения с информацией об выбранном элементе. Для этого
используются свойства text и selectedIndex. Функция showSelected() принимает параметр
- имя формы. Значение этого параметра возвращается выражением this.form и
представляет собой ссылку на текущую форму. Можно было, конечно и не передавать
параметр функции если эта функция существует специально для текущей формы, но если
кнопка будет находиться в другой форме, то параметр будет необходим. В функции
showSelected() переменной selNum присваивается значение свойства selectIndex объекта
select, а затем это значение используется при вычислении значения переменной setText
для индексации массива options.