Элементы Select и Option

Элемент Select представляет собой набор вариантов (представленных элемента_ ми Option), которые могут быть выбраны пользователем. Броузеры обычно ото_ бражают элементы Select в виде выпадающих меню или списков. Элемент Select может работать двумя сильно различающимися способами, и значение свойства type зависит от того, как он настроен. Если в теге <select> определен атрибут mul_ tiple, пользователь может выбрать несколько вариантов, и свойство type объекта Select равно "select_multiple". В противном случае, если атрибут multiple отсутст_ вует, может быть выбран только один вариант, и свойство type равно "select_one".

В некотором отношении элемент с возможностью множественного выбора похож на набор флажков, а элемент без такой возможности – на набор переключателей. Элемент Select отличается от них тем, что единственный элемент Select предос_ тавляет полный набор вариантов выбора, которые задаются в HTML с помощью тега <option> и представлены в JavaScript объектами Option, хранящимися в мас_ сиве options[] элемента Select. Поскольку элемент Select предлагает набор вари_ антов, у него нет свойства value, как у других элементов формы. Вместо этого, о чем мы вскоре поговорим, свойство value определяется в каждом объекте Op_ tion, содержащемся в элементе Select.

Когда пользователь выбирает вариант или отменяет выбор, элемент Select вызы_ вает свой обработчик события onchange. Для элементов Select без возможности множественного выбора значение доступного только для чтения свойства select_ edIndex равно номеру выбранного в данный момент варианта. Для элементов Se_ lect с возможностью множественного выбора одного свойства selectedIndex недос_ таточно для представления полного набора выбранных вариантов. В этом случае для определения выбранных вариантов следует в цикле перебрать элементы мас_ сива options[] и проверить значения свойства selected каждого объекта Option.

Помимо свойства selected у элемента Option есть свойство text, задающее строку текста, которая отображается в элементе Select для данного варианта. Можно установить значение этого свойства так, чтобы изменить предлагаемый пользо_ вателю текст. Свойство value также представляет доступную для чтения и запи_ си строку текста, который отсылается на веб_сервер при передаче данных формы. Даже если вы пишете чисто клиентскую программу, и передачи данных вашей формы никогда не происходит, свойство value (или соответствующий ей HTML_ атрибут value) может применяться для хранения данных, которые потребуются при выборе пользователем определенного варианта. Обратите внимание, что эле_ мент Option не определяет связанных с формой обработчиков событий; исполь_ зуйте вместо этого обработчик onchange соответствующего элемента Select.

Помимо установки свойства text объектов Option есть другие способы динамиче_ ского изменения выводимых в элементе Select вариантов. Можно обрезать мас_

466 Глава 18. Формы и элементы форм

сив элементов Option, установив свойство options.length равным требуемому ко_ личеству вариантов, или удалить все объекты Option, установив значение свойст_ ва options.length равным нулю. Предположим, на форме с именем «address» име_ ется объект Select с именем «country». Тогда удалить все варианты выбора из элемента можно следующим образом:

document.address.country.options.length = 0; // Удаление всех вариантов

Мы также можем удалить отдельный объект Option элемента Select, записав в со_ ответствующий элемент массива options[] значение null. Сделав это, вы удалите объект Option, и все элементы массива options[], индексы которых больше, авто_ матически сместятся для заполнения освободившейся ячейки:

// Удаление одного объекта Option из элемента Select

// Элемент Option, ранее расположенный в ячейке options[11],

// переместится в options[10] ...

document.address.country.options[10] = null;

Описание элемента Option есть в четвертой части книги. Дополнительно озна_ комьтесь с описанием метода Select.add() стандарта DOM уровня 2, предостав_ ляющего альтернативную возможность добавления новых вариантов выбора.

И наконец, элемент Option определяет конструктор Option(), который можно ис_ пользовать для динамического создания новых элементов Option. Таким обра_ зом, можно добавить новые варианты в элемент Select, добавив их в конец мас_ сива options[]. Например:

// Создать новый объект Option

var zaire = new Option("Zaire", // Свойство text "zaire", // Свойство value

// Отобразить вариант в элементе Select, добавив его к массиву options: var countries = document.address.country; // Получить объект Select countries.options[countries.options.length] = zaire;

Для группировки связанных вариантов внутри элемента Select может использо_ ваться тег <optgroup>. В теге <optgroup> имеется атрибут label, задающий текст, который будет присутствовать в элементе Select. Однако несмотря на свое види_ мое присутствие в наборе элементов выбора, тег <optgroup> не может быть выбран пользователем, и объекты, соответствующие тегу <optgroup>, никогда не окажут_ ся в массиве options[] элемента Select.