Javascript-программисты часто работают с выпадающими списками — селектами. И не всегда эта работа доставляет удовольствие.
Курс молодого бойца
SELECT — это элемент формы, предоставляющий пользователю выбрать один (или несколько) элементов из своего списка. В качестве потомков может включать элементы OPTGROUP и OPTION. Сразу доходчивые примеры.
Селект с мультивыбором:
<option value="1">Январь</option>
<option value="2">Февраль</option>
<option value="3">Март</option>
<option value="4">Апрель</option>
<option value="5">Май</option>
<option value="6">Июнь</option>
</select>
Селект с опшинами, разбитыми по группам:
<optgroup label="Хорошие верстальщики">
<option value="Mike">Mike</option>
<option value="Bob">Bob</option>
<option value="Ember">Ember</option>
</optgroup>
<optgroup label="Плохие верстальщики">
<option value="Vasya">Вася</option>
<option value="Kolya">Коля</option>
<option value="Petya">Петя</option>
</optgroup>
</select>
Как надеюсь понятно из примеров, чтобы селект был с мультивыбором, необходимо повесить на него атрибут multiple, при этом атрибут size задаст число одновременно отображаемых элементов списка. Элемент optgroup просто группирует элементы по разделам, имя которым можно задать через атрибут label.
Можно блокировать селект атрибутом disabled:
<option value="0">Меня заблокировали</option>
</select>
А можно блокировать отдельные элементы списка (или даже группы элементов):
<option value="can">Меня можно выбрать</option>
<option disabled="disabled" value="cannot">А меня нет</option>
<optgroup disabled="disabled" label="Ха-ха!">
<option value="0">Мы</option>
<option value="0">тоже</option>
<option value="0">заблокированы</option>
</optgroup>
</select>
К бою
JavaScript-программисту приходится часто решать однотипные задачи, связанные с селектами:
- Получение значения/текста выбранного элемента
- Disable/enable всего списка
- Очистка/наполнение опшинов (особенно акутально!)
Чтобы научиться правильно манипулировать всем этим добром, рекомендую ознакомиться с интерфейсом селектов, оптгрупп и опшинов в DOM2. А можно облегчить себе задачу и воспользоваться небольшим скриптом, умеющим немного работать с селектами:
$ : function(obj) { // Возвращает DOM-элемент и только если это SELECT
if (typeof obj == 'string')
obj = document.getElementById(obj);
if (obj.nodeName && obj.nodeName.toLowerCase() == 'select')
return obj;
else
alert('Селект не найден');
},
add : function(obj, option) {
obj = this.$(obj);
if (/*@cc_on!@*/false)
obj.add(option);
else
obj.add(option, null);
},
getValue : function(obj) {
obj = this.$(obj);
return obj.value;
},
getText : function(obj) {
obj = this.$(obj);
return obj.options[obj.selectedIndex].text;
},
truncate : function(obj) { // Очистка селекта от опшинов
obj = this.$(obj);
while (obj.options.length)
obj.remove(obj.options.length - 1);
},
lock : function(obj, status) { // Блокировка селекта с выводом статусного сообщения
obj = this.$(obj);
this.truncate(obj);
if (status)
this.add(
obj,
new Option(status ? status : '', status ? status : 0)
);
obj.disabled = true;
},
fill : function(obj, array) { // Заполнение из массива: array[i][0] = value, array[i][1] => text
obj = this.$(obj);
this.truncate(obj);
for (var i = 0; i < array.length; i++)
this.add(
obj,
new Option(array[i][1] ? array[i][1] : array[i][0], array[i][0])
);
obj.disabled = false;
}
};
Достоинства скрипта:
- Он простой и очень мелкий.
- Работает кроссбраузерно (проверено в IE6+, FF2+, Safari3, Opera9, Chrome).
- Все методы принимают в качестве аргумента как ID, так и ссылку на селект.
- Методы getValue() и getText() быстро вернут вам значение и текст выбранного элемента.
- Метод truncate() очищает селект от всех опшинов, а fill() может заполнить его заново из переданного массива.
- Метод lock() создан для веса и полезен для ajax-обновляемых селектов, когда список необходимо вычистить, задизейблить и написать 'Загружается'.
Скрипт НЕ приспособлен для работы с мультивыборными списками или селектами с optgroup-элементами, но его можно легко модифицировать, если кому-то понадобится.
