Свойства selected и selectedIndex
Свойства text и value объекта Option
Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде он расположен между тэгами и . Свойство value содержит значение атрибута VALUE тэга. Например, пусть один из вариантов в списке был описан как:
Вариант первый
Тогда значение свойства text у соответствующего объекта будет равно "Вариант первый ", а значение свойства value равно " n1 ".
Возникает вопрос, зачем нужны два свойства? Дело в том, что на сервер передается значение value выбранного варианта. В случае же, когда атрибутVALUE у контейнера отсутствует, на сервер передается значение text.
Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).
Вариант: ОдинДваВыбрали индекс:
Обратите внимание, что в обработчике события onChange мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант - к этому моменту поле уже будет определено.
Если список вариантов задан как , т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.
Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:
Фрукты: яблокобананкивиперсик
Выбраны позиции:
Пример 5.5. Обработчик onChange при выборе множественных вариантов (html, txt)
Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.
список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.С каждым контейнером ассоциирован объект класса Select , а с каждым дочерним контейнером - объект класса Option , являющийся свойством данного объекта класса Select . Кроме того, свойством объекта класса Select является также коллекция options , объединяющая все его дочерние объекты Option . Перечислим основные свойства, методы и события, характеризующие эти объекты.
options size length multiple selectedIndex |
focus() blur() add() remove() |
onBlur onChange onFocus |
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Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:
Фрукты:
яблоко
банан
киви
персик
Выбраны позиции:
5.5.
Обработчик onChange при выборе множественных вариантов
Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.
Устанавливает обработчик выделения текста внутри элемента или, либо, запускает это событие. Данное событие может происходить только в элементах и . Метод имеет три варианта использования:
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 ) ; } ) ;