jQuery работа с select

Очень часто приходится сталкиваться с выпадающим HTML списком <select>, по этому на заметку оставлю несколько селекторов jQuery.

 

Например, у нас имеется простенький <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;
});

Источник: http://www.webnotes.com.ua/index.php/archives/699

---

Пока никто не прокомментировал =(. Будьте первым.

---

Добавить комментарий

Ваше имя
Ваш email (будет скрыт)
Комментарий
Проверка на робота