Частенько приходится сталкиваться с раскрывающимся списком <select>, так что набралась небольшая коллекция советов. Элементы <select> в основном имеют два значения, к которым надо обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. В качестве примера возьмем следующий код:
<select id=»town»>
<option value=»Volgograd»>Волгоград</option>
<option value=»Saratov»>Саратов</option>
<option value=»Chelyabinsk»>Челябинск</option>
<option value=»Liski» selected>Лиски</option>
<option value=»Voronezh»>Воронеж</option>
</select>
Получим значение value, выбранной опции:
$(«#town»).val(); // Liski
Получим текстовку выбранной опции:
$(«#town option:selected»).text(); // Лиски
Сделать <select> недоступным:
$(«#town»).attr(«disabled», «disabled»);
Разблокировать <select>
$(«#town»).attr(«disabled»,»»);
Удалить выбранный элемент:
$(«#town :selected»).remove(); // будет удален Лиски
Удалить первый элемент:
$(«#town :first»).remove(); // будет удален Волгоград
Удалить последний элемент:
$(«#town :last»).remove(); // будет удален Воронеж
Удалить элемент, у которого value=’Chelyabinsk’:
$(«#town option[value=’Chelyabinsk’]»).remove();
$(«#town [value=’Chelyabinsk’]»).remove(); // сокращенно
Очистить весь список <select>
$(«#town»).empty();
Перебрать все элементы списка <select> и вывести в блок с id=«result»:
var result = «»;
$(‘#town option’).each(function(){
result = result + this.text + «<br/>»;
});
$(‘div#result’).html(result);
Сделать выбранным последний элемент:
$(«#town :last»).attr(«selected», «selected»); // будет выбран Воронеж
Сделать выбранным второй элемент:
$(«#town :nth-child(2)»).attr(«selected», «selected»); // будет выбран Саратов
Сделать выбранным элемент, содержащий текстовку ‘Лиски’:
// Первый вариант
$(«#town :contains(‘Лиски’)»).attr(«selected», «selected»);// Второй вариант
$(«#town»).find(«option:contains(‘Лиски’)»).attr(«selected», «selected»);// Третий вариант (не зависит от регистра)
var opt = $(‘option’);
opt.each(function(indx, element){
if ( $(this).text().toLowerCase() == ‘Лиски’.toLowerCase() ) {$(this).attr(«selected», «selected»);}
});
В первом и втором вариантах используем селектор по тексту :contains(text), который чувствителен к регистру. Третий вариант от регистра не зависит.
Сделать выбранным элемент, value которого = Saratov:
$(«#town option[value=’Saratov’]»).attr(«selected», «selected»);
Добавить элемент в начало списка <select>:
$(«#town»).prepend( $(‘<option value=»Ryazan»>Рязань</option>’) );
Добавить элемент в конец списка <select>:
$(«#twon»).append( $(‘<option value=»Samara»>Самара</option>’));
Добавить новый элемент после третьего:
$(«#town option:nth-child(3)»).after( $(‘<option value=»Voronezh»>Воронеж</option>’) );
Добавить несколько элементов option в список <select> из массива:
var newOptions = {
«Ryaza»: «Рязань»,
«Samara»: «Самара»
};$.each(newOptions, function(key, value) {
$(‘#town’).append($(«», {
value: key,
text: value
}));
});
Количество элементов option в списке <select>:
$(«select[id=town] option»).size();
Проверяем, выбран ли элемент в списке <select>:
if ( $(«#town»).val() ) {…}
Сделать все элементы в списке <select> не выбранными:
$(‘#town option:selected’).each(function(){
this.selected=false;
});
