Обработчик события onChange объекта Select

Свойства selected и selectedIndex

Свойства text и value объекта Option

Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде он расположен между тэгами <OPTION> и </OPTION>. Свойство value содержит значение атрибута VALUE тэга <OPTION>. Например, пусть один из вариантов в списке был описан как:

<OPTION VALUE="n1">Вариант первый</OPTION>

Тогда значение свойства text у соответствующего объекта будет равно "Вариант первый", а значение свойства value равно "n1".

Возникает вопрос, зачем нужны два свойства? Дело в том, что на сервер передается значение value выбранного варианта. В случае же, когда атрибут VALUE у контейнера <OPTION> отсутствует, на сервер передается значение text.

Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).

<FORM> Вариант: <SELECT onChange="form.e.value=selectedIndex;"><OPTION>Один</OPTION><OPTION>Два</OPTION></SELECT>Выбрали индекс: <INPUT NAME=e> </FORM>

Обратите внимание, что в обработчике события onChange мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант — к этому моменту поле уже будет определено.

Если список вариантов задан как <SELECT MULTIPLE>, т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.

Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто — см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:

<FORM>Фрукты: <SELECT MULTIPLE onChange="form.e.value=''; for(i=0; i<length; i++) if(options[i].selected) form.e.value += options[i].text+', ';"> <OPTION>яблоко</OPTION><OPTION>банан</OPTION><OPTION>киви</OPTION><OPTION>персик</OPTION></SELECT><BR>Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e></FORM>

Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

Контрольные вопросы

1. Каково назначение свойства text объекта Option?

2. Каково назначение свойства selectedIndex?

3. Как используется коллекция options[]?

Литература:

Інтернет-университет информационных технологий www.intuit.ru. Курс «Введение в JavaScript»

Дата добавления: 2015-07-13