Объект 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.