theretalk.ru

    Главная      
Программирование
Самоучители:

Объект 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 используются выражения типа:

    • selectName.propertyName
    • selectName.methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
где selectName - имя объекта select, заданное в атрибуте name тега <select>, а formName- имя формы, элементом которой является объект select.
    К отдельным элементам списка, определенного в объекте select, можно обратиться при помощи массива options или массива elements, используя выражения вида:
    • 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 имеет свойства:

    • length - количество тегов <option>, заданных в теге <select>
    • name - соответствует атрибуту name тега <select>
    • options - массив значений тегов <option>
    • selectindex - содержит индекс выбранного элемента, а если выбрано несколько элементов, то индекс первого;
    • type - для списков с возможностью выбора одного элемента содержит значение "select-one", а для списков с возможностью выбора нескольких элементов - значение "select-multiple"
Теперь рассмотрим свойства для массива options:
    • 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.


Интернет и сети
Самоучители:
Статьи:

theretalk.ru 2007-2008 г.

Rambler's Top100


на www.altavista.ru