Программируем формы. Обработчик или источник события select

Свойства selected и selectedIndex

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

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

Вариант первый

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

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

Вариант: ОдинДваВыбрали индекс:

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

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

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

Фрукты: яблокобананкивиперсик
Выбраны позиции:

Пример 5.5. Обработчик onChange при выборе множественных вариантов (html, txt)

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

список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

С каждым контейнером ассоциирован объект класса Select , а с каждым дочерним контейнером - объект класса Option , являющийся свойством данного объекта класса Select . Кроме того, свойством объекта класса Select является также коллекция options , объединяющая все его дочерние объекты Option . Перечислим основные свойства, методы и события, характеризующие эти объекты.

Объект Select Свойства Методы Обработчики событий

options size length multiple selectedIndex

focus() blur() add() remove()

onBlur onChange onFocus

Объект Option Свойства Методы События

defaultSelected selected index text value

нет

Мы не будем описывать все свойства, методы и события этих двух объектов. Остановимся только на типичных способах применения их комбинаций.

Создание объектов Option

Объект класса Option интересен тем, что в отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект класса Option :

opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);

где аргументы соответствуют свойствам обычных объектов класса Option :

text - строка текста, которая размещается в контейнере (например: текст );
value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option ;
defaultSelected - выбрана ли эта альтернатива по умолчанию (true / false );
selected - альтернатива была выбрана пользователем (true / false ).

На первый взгляд не очень понятно, для чего может понадобиться программисту такой объект, ведь создать объект класса Select нельзя и, следовательно, нельзя приписать ему новый объект Option . Все объясняется, когда речь заходит об изменении списка альтернатив у имеющегося в документе объекта Select . Делать это можно, при этом изменение списка альтернатив Select не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах , путем программирования обычных меню (options ).

При программировании альтернатив следует обратить внимание на то, что у объектов класса Option нет свойства name , в виду того, что у контейнера нет атрибута NAME . Таким образом, к встроенным в документ объектам класса Option можно обращаться только как к элементам коллекции options .

Коллекция options

Встроенный массив (коллекция ) options - это одно из свойств объекта Select . Элементы этого массива являются полноценными объектами класса Option . Они создаются по мере загрузки страницы браузером. Количество объектов Option , содержащихся в объекте document.f.s класса Select , можно узнать с помощью стандартного свойства массива: document.f.s.options. length . Кроме того, у самого объекта Select есть такое же свойство: document.f.s. length - оно полностью идентично предыдущему.

Программист имеет возможность не только создавать новые объекты Option , но и удалять уже созданные браузером объекты:

Первый вариант Второй вариант Третий вариант 5.3. Удаление вариантов из SELECT

В данном примере при загрузке страницы с сервера у нас имеются три альтернативы. Их можно просматривать как ниспадающий список вариантов. После нажатия на кнопку " Удалить последний вариант " в форме остается только две альтернативы. Если еще раз нажать на эту кнопку, останется только одна альтернатива. В конечном счете, вариантов не останется вовсе, т.е. пользователь лишится возможности выбора. При нажатии кнопки сброса ( reset ) варианты не восстанавливаются - альтернативы утеряны бесследно.

Теперь, используя конструктор Option , сделаем процесс обратимым:

function RestoreOptions() { document.f.s.options = new Option("Вариант один","",true,true); document.f.s.options = new Option("Вариант два"); document.f.s.options = new Option("Вариант три"); return false; } Первый вариант Второй вариант Третий вариант 5.4. Удаление и добавление вариантов из SELECT

Восстановление альтернатив мы поместили в обработчик события onReset контейнера FORM . Создаваемые объекты класса Option мы присваиваем объекту document.f.s класса Select . При этом первая альтернатива должна быть выбранной по умолчанию (аргументу defaultSelected задано значение true ), чтобы смоделировать поведение при начальной загрузке страницы.

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

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

Вариант первый

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

Возникает вопрос, зачем нужны два свойства? Дело в том, что на сервер передается значение value выбранного варианта. В случае же, когда атрибут VALUE у контейнера отсутствует, на сервер передается значение text .selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option . Оно равно true , если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.

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

Фрукты: яблоко банан киви персик
Выбраны позиции: 5.5. Обработчик onChange при выборе множественных вариантов

Устанавливает обработчик выделения текста внутри элемента или, либо, запускает это событие. Данное событие может происходить только в элементах и . Метод имеет три варианта использования:

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject .

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...} .

Убрать установленный обработчик можно с помощью метода unbind() .

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

В случае выделения текста с помощью мыши, браузеры вызывают событие select при завершении выделения. Если выделение происходит с помощью нажатия клавиш ← → ↓ при зажатом shift"е, то событие будет происходить при каждом отпускании клавиши со стрелкой.

Для того, чтобы получить выделенную часть текста в разных браузерах требуются разные средства. В FireFox и Google Chrome выделенную часть даст метод window.getSelection() или document.getSelection() , в то время как IE и Opera предоставят нужный текст при вызове метода document.selection.createRange() . Кроссбраузерный вариант будет выглядеть так:

function selectedText() { if (window.getSelection ) txt = window.getSelection () .toString () ; else if (document.getSelection ) txt = document.getSelection () ; else if (document.selection ) txt = document.selection .createRange () .text ; return txt; }

Отметим, что функция selectedText() будет работать не только для и , она будет возвращать выделенный текст, в каком бы элементе (элементах) он не находился.

Пример

// установим обработчик события select, элементу с идентификатором foo $("#foo" ) .select (function () { alert ("Внутри элемента foo, пользователем был выделен текст." ) ; } ) ; // вызовем событие select на элементе foo $("#foo" ) .select () ; // установим еще один обработчик события select, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(".block" ) .select ({ a: 12 , b: "abc" } , function (eventObject) { var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; alert ("Внутри элемента с классом block был выделен текст" + "В обработчик этого события переданы данные: " + externalData ) ; } ) ;