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;
});

На этом пока все.

Если что-то не упомянул, пишите в комментариях!

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 50, в среднем: 4.84 из 5)
Loading ... Loading ...



  1. #1 Ник Дизель - Ноябрь 10th, 2011 at 21:12

    Хорошая статья… Вот только не всё из выше перечисленного работает корректно, а жаль :(.

    Например,

    $(«#my_select :selected»).text(); – не работает (возвращает 2 раза текст)

    $(«#my_select :selected»).html(); – не работает (возвращает текст только первого элемента, а не выбранного)

  2. #2 gs-design - Январь 4th, 2012 at 20:37

    Хорошая статья. Часто подсматриваю…
    пользую jQuery 1.6.4 мои 5 копеек:

    Сделать выбранным элемент, value которого = 2:
    $(«#my_select»).val(2)

  3. #3 Виталий - Январь 5th, 2012 at 00:29

    gs-design :
    Хорошая статья. Часто подсматриваю…
    пользую jQuery 1.6.4 мои 5 копеек:
    Сделать выбранным элемент, value которого = 2:
    $(«#my_select»).val(2)

    Насколько я помню, такой способ просто ставит значение 2, имхо более верно использовать $(«#my_select option[value=2]«).attr(‘selected’, ‘selected’); – грубый способ, ну или $(«#my_select option[value=2] :selected»); – этот вроде более верный, но я не уверен в синтаксисе,..

  4. #4 gs-design - Январь 5th, 2012 at 15:00

    Возвращаясь к вопросу:
    Сегодня проверил результат работы в IE 9, Opera, Chrome, FireFox – через val работает великолепно. Серцы копать не стал – не такой я пока энтузиаст :)
    К слову, установка значения через val в jQuery – это верно, но в select значение нам и надо изменить.

    Приведённый способ через attr так же верен, но здесь используется то, что браузеры отождествляют атрибуты и свойства элементов DOM (http://javascript.ru/tutorial/dom/attributes).
    При способе задания выбранного элемента через val изменяется именно свойство, а не атрибут (проверял через FireBug).

(will not be published)

Spam Protection by WP-SpamFree

  1. No trackbacks.