Книга: JavaScript. Подробное руководство, 6-е издание

Select

Select

графический список для выбора (Node, Element, FormControl)

Элемент Select представляет HTML-тег <select>, который отображается как графический список выбора. Если в определении HTML-элемента присутствует атрибут multiple, пользователь может одновременно выбрать в списке любое число вариантов. Если этот атрибут отсутствует, пользователь сможет выбрать только один вариант, и варианты ведут себя как радиокнопки - выбор одного из них приводит к отмене предыдущего выбора.

Если значение size меньше, чем число вариантов, в списке появится полоса прокрутки, чтобы обеспечить доступность всех вариантов. Во-вторых, если значение атрибута size равно 1 и атрибут multiple не указан, текущий выбранный вариант отображается в единственной строке, а список всех остальных вариантов доступен через раскрывающееся меню. Первый стиль представления позволяет видеть все доступные варианты, но занимает больше пространства в окне броузера. Второй стиль требует минимум пространства, но не дает возможности увидеть альтернативные варианты все сразу. По умолчанию свойство size получает значение 4 при наличии атрибута multiple и 1 - в противном случае.

Самый большой интерес представляет свойство options[] элемента Select. Это объект, подобный массиву, содержащий элементы <option> (см. Option), которые описывают варианты выбора, представленные в элементе Select. По историческим причинам этот объект, подобный массиву, имеет необычные особенности, касающиеся выполнения операций добавления и удаления элементов <option>. Дополнительные сведения приводятся в статье HTMLOptionsCollection.

Если в элементе Select отсутствует атрибут multiple, определить, какой вариант выбран, можно с помощью свойства selectedlndex. Однако если допускается возможность одновременного выбора нескольких вариантов, это свойство содержит индекс первого выбранного варианта. Чтобы определить все множество выбранных вариантов, необходимо обойти в цикле массив options[] и проверить свойство selected каждого объекта Option.

Свойства

В дополнение к свойствам, перечисленным ниже, элементы Select также поддерживают свойства интерфейса Element и FormControl и имеют свойства multiple, required и size, соответствующие HTML-атрибутам.

unsigned long length

Количество элементов в коллекции options. Объекты Select сами являются объектами, подобными массивам, поэтому для объекта s типа Select и числа п выражение s[n] возвращает то же значение, что и s.options[n].
readonly HTMLOptionsCollection options

Объект, подобный массиву, с элементами Option, содержащимися в данном элементе Select. Описание исторически сложившегося поведения этой коллекции приводится в справочной статье HTMLOptionsCollection.

long selectedlndex

Индекс выбранного варианта в массиве options. Если ни один из вариантов не выбран, значение этого свойства равно -1. Если выбрано более одного варианта, свойство selectedlndex определяет индекс только первого из них.

Установка значения этого свойства приводит к выбору указанного варианта и отменяет выбор всех остальных, даже если в объекте Select указан атрибут multiple. Если выбор реализован в виде списка (когда значение свойства size > 1), то выбор всех вариантов можно отменить, установив свойство selectedlndex равным -1. Обратите внимание: этот способ изменения выбора не приводит к вызову обработчика события onchange().
readonly HTMLCollection selectedOptions

Доступный только для чтения oбъект, подобный массиву, содержащий выбранные элементы Option. Это новое свойство, определяемое спецификацией HTML5, которое на момент написания этих строк было реализовано не во всех броузерах.

Методы

Все методы, перечисленные ниже, делегируют выполнение операций одноименным методам свойства options; дополнительные сведения приводятся в справочной статье HTMLOptionsCollection. В дополнение к этим методам элементы Select реализуют методы интерфейсов Element и FormControl.

void add(Element element, [any before])

Действует подобно методу options.add(), добавляя новый элемент Option.

any item(unsigned long index)

Действует подобно методу options.item() и возвращает элемент Option. Он также неявно вызывается, когда пользователь обращается к элементу Select как к массиву.

any namedltem(string name)

Действует подобно методу options.namedltem(). См. HTMLOptionsCollection.

void remove(long index)

Действует подобно методу options.remove(), удаляя элемент Option. См. HTMLOptionsCollection.

Оглавление книги