Очень часто приходится сталкиваться с выпадающим HTML списком select, по этому на заметку оставлю несколько селекторов jQuery.
Например, у нас имеется простенький select с id=”my_select”
1) Самое простое – получить значение выбранного элемента
$(«#my_select option:selected»).val();
сокращенно:
$(«#my_select :selected»).val();
или:
$(«select#my_select»).val();
2) Получаем текст того же выбранного элемента
$(«#my_select :selected»).html();
или:
$(«#my_select :selected»).text();
3) Сделать
$(«#my_select»).attr(«disabled»,»disabled»);
4) Разблокировать
$(«#my_select»).attr(«disabled»,»»);
5) Удалить выбранный элемент
$(«#my_select :selected»).remove();
6) Удалить первый элемент
$(«#my_select :first»).remove();
7) Удалить последний элемент
$(«#my_select :last»).remove();
8) Удалить элемент, у которого value=’2′
$(«#my_select option[value=’2′]»). remove();
сокращенно:
$(«#my_select [value=’2′]»). remove();
9) Очистить весь список
$(«#my_select»).empty();
или:
$(‘option’, $(«#my_select»)).remove();
10) Перебрать все элементы списка select
$(‘#my_select option’).each(function(){
alert(this.text);
});
11) Сделать выбранным последний элемент
$(«#my_select :last»).attr(«selected», «selected»);
12) Сделать выбранным второй элемент
$(«#my_select :nth-child(2)»).attr(«selected», «selected»);
13) Сделать выбранным элемент, содержащий текст ‘two’
$(«#my_select :contains(‘two’)»).attr(«selected», «selected»);
или:
$(«#my_select»).find(«option:contains(‘two’)»).attr(«selected», «selected»);
или только первое вхождение:
$(«#my_select :contains(‘two’)»).first().attr(«selected», «selected»);
или:
$(«#my_select»).find(«option:contains(‘two’)»).first().attr(«selected», «selected»);
14) Сделать выбранным элемент, value которого = 2
$(«#my_select [value=’2′]»).attr(«selected», «selected»);
15) Добавить элемент в начало списка select
$(«#my_select»).prepend( $(‘‘));
16) Добавить элемент в конец списка select
$(«#my_select»).append( $(‘‘));
17) Добавить новый элемент после второго
$(«#my_select option:nth-child(2)»).after($(‘‘));
18) Количество элементов option в списке select
$(«select[id=my_select] option»).size();
19) Проверяем, выбран ли элемент в списке select
if($(«#my_select»).val())
20) Сделать все элементы в списке select не выбранными
$(‘#my_select option:selected’).each(function(){
this.selected=false;
});
21) Добавить несколько элементов option в список select из массива
//добавим эти элементы несколькими способами
var newOptions = {
"key_1": "test 1",
"key_2": "test 2"
};
//способ 1
$.each(newOptions, function(key, value) {
$('#my_select').append($("", {
value: key,
text: value
}));
});
//способ 2
var new_options = '';
$.each(newOptions, function(key, value) {
new_options += '' + value + '';
});
$('#my_select').html(new_options);
//способ 3
var select = $('#my_select');
if(select.prop) {
var options = select.prop('options');
}
else {
var options = select.attr('options');
}
$.each(newOptions, function(val, text) {
options[options.length] = new Option(text, val);
});