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

15.9.7. Элементы Select и Option

15.9.7. Элементы Select и Option

Элемент Select представляет собой набор вариантов (представленных элементами Option), которые могут быть выбраны пользователем. Броузеры обычно отображают элементы Select в виде раскрывающихся меню, но, если указать в атрибуте size значение больше чем 1, они будут отображать их в виде списков (возможно, с полосами прокрутки). Элемент Select может работать двумя сильно различающимися способами, а выбор того или иного способа определяется значением свойства type.

Если в теге <select> определен атрибут multiple, пользователь сможет выбрать несколько вариантов, а свойство type объекта Select будет иметь значение «select-multiple». В противном случае, если атрибут multiple отсутствует, может быть выбран только один вариант и свойство type будет иметь значение «select-one».

В некотором смысле элемент с возможностью множественного выбора похож на набор флажков, а элемент без такой возможности - на набор радиокнопок. Однако варианты выбора, отображаемые элементом Select, не являются кнопками-переключателями: они определяются с помощью тега <option>. Элемент Select определяет свойство options, которое является объектом, подобным массиву, хранящим объекты Option.

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

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

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

Чтобы добавить в элемент Select новый вариант, можно создать его с помощью конструктора Option() и добавить в конец массива options[], как показано ниже:

// Создать новый объект Option
var zaire = new Option("Zaire", // Свойство text
                       "zaire", // Свойство value
                        false,  // Свойство defaultSelected
                        false); // Свойство selected
// Отобразить вариант в элементе Select, добавив его в конец массива options:
var countries = document.address.country;
// Получить объект Select
countries.options[countries.options.length] = zaire;

Имейте в виду, что эти специальные возможности элемента Select пришли к нам из прошлых времен. Вставку и удаление вариантов можно реализовать более очевидным способом, воспользовавшись стандартными методами Document.createElement(), Node.insertBefore(), Node.removeChild() и другими.

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