Работа с элементом select из jQuery

Работа с элементом select из jQuery

Частенько приходится сталкиваться с раскрывающимся списком <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;
});

 

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: