Добавляем...


Меню выбора
В (X)HTML дескриптор <select> используется для создания двух видов раскрывающихся меню. Первой и наиболее часто используемой формой является меню с возможностью выбора только одной опции — именно такое меню обычно и называют раскрывающимся. Вторая форма меню позволяет выбрать несколько опций, и такое меню обычно называют списком с прокруткой. В JavaScript оба эти дескриптора представляются одним объектом Select. В DOM уровня 1 соответствующий объект тоже один, но называется он HTMLSelectElement.
Начнем обсуждение с примера обоих видов меню в XHTML:

<strong>Выбор одного робота:</strong>
<select name="robot" id="robot">
<option>Охранник</option>
<option>Тренер</option>
<option>Друг</option>
<option>Повар</option>
</select>
<br /></br />
<strong>Выбор нескольких po6oтов:</strong>
<select name="robotMulti" id="robotMulti" size="4"
multiple="multiple">
<option>Охранник</option>
<option>Тренер</option>
<option>Друг</option>
<option>Повар</option>
</select>

Объект HTMLSelectElement имеет свойства и методы, общие для всех полей формы (name, disabled, size, tablndex, form, focus () и blur () ), а также дополнительные свойства и методы, показанные в таблице. Некоторые из них требуют дополнительного обсуждения. Для начала рассмотрим свойство multiple, установка которого говорит о том, что меню должно позволять выбор нескольких вариантов одновременно. Атрибут size используется для того, чтобы указать число вариантов показываемых в поле; по умолчанию значением для этого атрибута является 1.

Таблица. Дополнительные свойства и методы объекта HTMLSelectElement
Свойство Описание
length Число элементов <option>, содержащихся в данном элементе (длина коллекции options[])
multiple Логическое значение, указывающее, разрешается ли пользователю выбирать не одну, а несколько опций
selectedlndex Индекс выбранной в данный момент опции в коллекции options [ ]. Если значением multiple является true, это свойство предоставляет информацию только о первой из выбранных опций
size Число видимых на экране опций (1 для раскрывающегося меню, больше 1 для списка с прокруткой)
options[ ] Коллекция опций, содержащихся в <select>
value Строка, хранящая значение атрибута value выбранной в данный момент опции. Если значением multiple является true, это свойство предоставляет информацию только о первой из выбранных опций
add (элемент, позиция) Вставляет новый объект Option, указанный параметром элемент, перед объектом Option, на который указывает параметр позиция
remove (индекс) Удаляет объект option, имеющий позицию индекс в коллекции options [ ]

Замечание. Свойство value объекта Select недостаточно широко поддерживается старыми браузерами. По этой причине его использования следует избегать. Вместо указаны свойства используйте selectedlndex в совокупности с коллекцией options [], чтобы получить выбранное значение вручную.

Для данного объекта доступны многие обработчики событий (например, onfocus но самым полезным из обработчиков событий для <select> является onchange, вызываемый каждый раз при смене пользователем выбранного элемента в меню.
Ключом к работе с меню, будь то меню с возможностью выбора одной опции или меню позволяющее выбор нескольких опций, является понимание того, как используется коллекция options [ ] для выяснения выбранного в данный момент значения. В случае меню с возможностью однозначного выбора выбранная в данный момент опция хранится в свойстве selectedlndex и, таким образом, легкодоступна. Например, если в форме testform мы имеем элемент <select> с именем testselect, то соответствующую опцию будет ссылаться document.testfoim.testselect.selectedlndex. Чтобы увидеть значение выбранной опции, необходимо использовать достаточно длинный оператор типа alert(document.testform.testselect.options[document. testform.testselect.selectedlndex].value). Как видите, соответствующий запрос очень быстро становится громоздким, поэтому с объектом <select> часто используют сокращенную форму this, как показано ниже:

<form>
<select
onchange="alert(this.options[this.selectedlndex].value);">
<option value="значение один">Опция 1</option>
<option value="значение два">Опция 2</option>
<option value="значение три">Опция 3</option>
</select>
</form>

Однако, когда значением атрибута multiple является true, необходимо пройтись пройтись по коллекции options [ ], чтобы найти выбранные опции:

<script type="text/javascript">
<!--
function showSelected(menu)
{
var i, msg="";
for (i=0; і < menu.options.length; i++)
if (menu.options[i].selected)
msg += "опция "+i+" выбранa\n";

if (msg.length == 0)
msg = "не выбрано ни одной опции";
alert(msg);
}
//-->
</script
form name="myform" id="myform">
<select name="myselect" id="myselect" multiple="true">
<option value="3начение 1" selected="true">Опция 1</option>
<option value="3начение 2">0пция 2</option>
<option value="3начение 3" selected="true">Oпция 3</option>
<option value="3начение 4">Опция 4</option>
<option value="3начение 5">Опция 5</option>
</select>
<br />
<input type="button" value='Показать выбранное"
onclick="showSelected(document.myform.myselect);" />
</form>


Элементы Option

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

Таблица. Дополнительные свойства объекта HTMLOptionElement
Свойство Описание
defaultSelected Логическое значение, указывающее, выбирается ли эта опция по умолчанию (т.е. будет ли для данного дескриптора <option> установлен атрибут selected)
index Число, указывающее позицию данной опции в коллекции options [ ] объекта Select
selected Логическое значение, указывающее, выбрана ли опция в данный момент
text Строка, содержащая текст, заключенный в рамках дескриптора <option>. Часто путают со значением value; поскольку текст, заключенный в рамках дескриптора <option>, посылается серверу, значение value не указывается
value Строка, содержащая текст атрибута value, который посылается серверу, если данная опция выбрана в момент подачи запроса


Настраиваемые меню выбора

Тот факт, что с полями формы можно связать фрагменты сценария, означает, что можно воздействовать на вид или содержимое элемента в ответ на действия пользователя, производимые с другим элементом. Мы еще увидим варианты использования указанной техники в других примерах данной главы, но чаще всего она применят с меню выбора.
Связанные меню выбора обеспечивают возможность быстро предоставить на выбор пользователю очень большое число опций. Ключом к построению таких меню в JavaScript является понимание того, как "на лету" редактировать или же добавлять в меню новые элементы <option>. Традиционно для этого в JavaScript сначала используется операция new с конструктором Option (), а затем созданная опция вставляется в меню.
Синтаксис конструктора Option следующий:

var новаяОпция = new Option(текстОпции, значение);

где текстОпции — строка, содержащая текст, заключенный в рамки дескриптора <option>, а значение — строка, задающая значение атрибута value элемента.
Созданные объекты Option можно вставить в коллекцию options [ ] соответствующего меню выбора. Можно также удалить неиспользуемые позиции, установив для них значения null. В следующем простом примере создаются два меню, одно — (списком стран, а другое — со списком городов. Меню городов изменяется динамически, когда пользователь выбирает страну.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Проверка связанных элементов выбора</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
// Создание массива с городами для каждой страны
var cities = new Array(4); cities["Australia"] =
["Sydney", "Melbourne", "Canberra", "Perth", "Brisbane"];
cities["France"] = ["Paris", "Lyons", "Nice", "Dijon"];
cities["Japan"] = ["Tokyo", "Kyoto", "Osaka", "Nara"];
cities["New Zealand"] = ["Auckland", "Wellington", "Christchurch", "Dunedin", "Queenstown"];
cities["Россия"] = ["Москва", "Екатеренбург", "Иркутск", "Магадан"];

function removeOptions(optionMenu)
{
for (var i=0; і < optionMenu.options.length; i++)
optionMenu.options[i] = null;
}
function addOptions(optionList, optionMenu)
{
removeOptions(optionMenu); // очистка опций
for (var i=0; і < optionList.length; i++)
optionMenu[i] = new Option(optionList[i], optionList [i]);
}
//-->
</script>
</head>
<body>
<h2>Выбор места для отпуска</h2>
<form name="testform" id="testform" action="#" method="get">
Страна:
<select name="country" id="country"
:iange="addOptions(cities[this.options[this.selectedlndex].text],document.testform.city);">
<option selected="selected">Australia</option>
<option>France</option>
<option>Japan</option>
<option>New Zealand</option>
<option>Россия</option>
</select>

Город:
<select name="city" id="city">
<option>Sydney</option>
<option>Melbourne</option>
<option>Canberra</option>
<option>Perth</option>
<option>Brisbane</option>
</select>
</form>
</body>
</html>

Этот пример иллюстрирует традиционный подход к динамическому изменению меню выбора. В Internet Explorer, как и в браузерах, обеспечивающих поддержку DOM уровня 1, можно использовать методы add {элемент, позиция) и remove (индекс) для упрощения работы со списком опций в меню <select>. Метод remove () работает в Internet Explorer так же, как и в DOM, но работа метода add () сложнее. В случае DOM метод add () ожидает наличия параметра позиция, указывающего конкретный объект HTMLOptionElement, тогда как в Internet Explorer традиционно передается значение соответствующего индекса.

Группы опций

Относительно малоизвестным и часто имеющим недостаточно проработанную поддержку является дескриптор <optgroup>, который может использоваться группировки опций и даже для создания подменю. Рассмотрим, например, следующий вариант разметки:

<select name="robotchooser" id="robotchooser">
<option>Выберите poбoтa</option>
<option>---------------</option>
<option>Дворецкий</option>
<optgroup 1аbе1="0хранники">
<option>Apни</option>
<option>K-9</option>
</optgroup>
<optgroup 1аbе1="Друзья">
<option>Пoдpyжкa</option>
<option>Друг</option>
</optgroup>
<option>Tpeнep</option>
</select>

В DOM предусмотрены только два свойства для работы с этим элементом через объект HTMLOptGroupElement, кроме тех, которые являются стандартными для всех элементов (X)HTML, и эти дополнительные свойства приведены в таблице. Странно, но в отличие от элемента select, в DOM не предлагается методов для ускорения работы с опциями, заключенными в рамки дескриптора <optgroup>, не предлагаются также ни свойство form, ни другие подобные свойства.

Таблица. Специальные свойства объекта HTMLOptGroupElement DOM
Свойство Описание
disabled Логическое значение, указывающее, позволено ли пользователю взаимодействовать с данной группой опций
label Строка, хранящая текст метки данной группы опций
назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика