jQuery работа с html тегом select
Очень часто приходится сталкиваться с работой над выпадающим HTML списком <select>. В данной заметке приведен список как можно обрабатывать select
Например, у нас имеется простенький <select id=”my_select” name=”my_select”> с id=”my_select”
<select id="my_select" name="my_select"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </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) Сделать <select> недоступным
$("#my_select").attr("disabled","disabled");
4) Разблокировать <select>
$("#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) Очистить весь список <select>
$("#my_select").empty();
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( $('<option value="0">zero</option>'));
16) Добавить элемент в конец списка <select>
$("#my_select").append( $('<option value="4">four</option>'));
17) Добавить новый элемент после второго
$("#my_select option:nth-child(2)").after($('<option value="22">twotwo</option>'));
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; });