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();
или:
$('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( $('<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;
});

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

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

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

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 145, в среднем: 4.72 из 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).

  5. #5 Дизайн студия ProGrafika - Июль 12th, 2012 at 17:13

    Отличная подборка, так держать!

  6. #6 berkut87 - Июль 25th, 2012 at 09:41

    Хорошая статья, очень помогла. Впринципе сборная из разных частей этой статьи, но может кому понадобится. Если не выбран ни один элемент в списке, сделать выбранным первый элемент
    if (!($(“#my_select”).val())) {
    $(“#my_select:first”).attr(“selected”, “selected”);

  7. #7 Les - Август 13th, 2012 at 17:46

    Предлежение использовать везде jQuery, заменить this на $(this) в 10-ом и 20-ом примере

  8. #8 Dmitry - Август 16th, 2012 at 21:25

    Предыдущий коммент – полная дурня, this там – это объект jQuery, поэтому делать $($) не имеет никакого смысла.

  9. #9 Николай - Август 31st, 2012 at 18:45

    Большое спасибо
    Как раз искал инфу на эту тему и нашёл в таков удобном и понятном виде

  10. #10 Denis - Сентябрь 1st, 2012 at 19:50

    spasibo balshoe uzhe navena 3 goda vse vremja kada ishu rabotu s selectami popadaju na etu isntrukcju
    ps zapomnit nemagu da i lenivo )

  11. #11 sergei - Сентябрь 7th, 2012 at 17:04

    Нет примера, если селект – объект, полученный ранее. Как тогда получить выбранный option?
    напр. var select = $(‘#my_select’);
    function getOption(select){
    var option = ???
    return option;
    }

  12. #12 nice - Сентябрь 15th, 2012 at 10:26

    Ник Дизель :

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

    Например,

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

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

    Не знаю почему вы так решили, по если написать простенький скрипт и проверить, то все работает!

  13. #13 nice - Сентябрь 15th, 2012 at 10:59

    Добавил п.21

    Где показан пример как добавить элементы option в список select из массива несколькими способами.

  14. #14 WordPress-о голик - Октябрь 11th, 2012 at 04:33

    Отлично то что и искал. Теперь сделаю наконец свою форму на сайте.

  15. #15 Кирилл - Ноябрь 2nd, 2012 at 17:06

    $(“#my_select [value='2']“).attr(“selected”, “selected”);
    14) Сделать выбранным элемент, value которого = 2

    Если я выберу значение с отличным от заданного value, то после сабмита формы сохраняется value = 2
    Как решить проблему?

  16. #16 eva - Ноябрь 15th, 2012 at 13:42

    Если в селекте используются группы, то такие методы как :first и т.п. не срабатывают

  17. #17 Mikalai - Ноябрь 16th, 2012 at 15:26

    Спасибо, отличная подборка. Было очень полезно

  18. #18 Andreich - Ноябрь 29th, 2012 at 23:36

    спасибо, очень полезно – как раз то, что искал

  19. #19 nataaly - Декабрь 13th, 2012 at 21:29

    замучилась уже. подскажите, пожайлуста.
    Задача:
    есть select multiple=”multiple” с optgroup и option
    У меня только есть индекс одного из элементов. Номер идет сквозным от первой элемента optgroup
    Как мне с помощью jquery обратиться к нужному элементу?… Например, 5-м будет элемент с классом =5

  20. #20 nataaly - Декабрь 13th, 2012 at 21:30

    замучилась уже. подскажите, пожайлуста.
    Задача:
    есть select multiple=”multiple” с optgroup и option
    У меня только есть индекс одного из элементов. Номер идет сквозным от первой элемента optgroup
    Как мне с помощью jquery обратиться к нужному элементу?… Например, 5-м будет элемент с классом =5
    select>
    optgroup>
    option>
    option>
    /optgroup>
    optgroup>
    option>
    option class=”5″>
    /optgroup>
    /select>

  21. #21 Игорь - Декабрь 18th, 2012 at 23:13

    Ник Дизель :
    Хорошая статья… Вот только не всё из выше перечисленного работает корректно, а жаль :(.
    Например,
    $(“#my_select :selected”).text(); – не работает (возвращает 2 раза текст)
    $(“#my_select :selected”).html(); – не работает (возвращает текст только первого элемента, а не выбранного)

    nataaly :
    замучилась уже. подскажите, пожайлуста.
    Задача:
    есть select multiple=”multiple” с optgroup и option
    У меня только есть индекс одного из элементов. Номер идет сквозным от первой элемента optgroup
    Как мне с помощью jquery обратиться к нужному элементу?… Например, 5-м будет элемент с классом =5
    select>
    optgroup>
    option>
    option>
    /optgroup>
    optgroup>
    option>
    option class=”5″>
    /optgroup>
    /select>

    обявить выбраный или который вам нада в переменную ( p ), потом $(‘#class’).attr(p).some();
    где some() это то что вам нада получить – както так

  22. #22 Твори пока живешь - Март 25th, 2013 at 17:38

    Спасибо как для новичка – очень понятная статья, если захотите разширить немного, я могу поделиться наработками поповоду рабты с change ()ж

  23. #23 nice - Март 28th, 2013 at 23:24

    Спасибо, всегда интересно!

  24. #24 Вадим - Апрель 8th, 2013 at 12:55

    Большое спасибо! С JQuery все всегда получается намного легче и быстрее!

  25. #25 Твори пока живешь - Апрель 10th, 2013 at 09:19

    Сделать что-то при изминении слекта:
    $(‘body’).on(‘change’,'#my_select’, function (){
    #do some stuff
    });

    Если нам надо искуственно вызвать событие .change(); (например для подгрузки аякса или прочих вещей):
    if( $(‘#my_select’).val() == “some_need_value”){
    $(“#my_select_1″).change();
    }

  26. #26 123 - Май 27th, 2013 at 13:36

    Дизайн студия ProGrafika :
    Отличная подборка, так держать!

    да да именно так

  27. #27 KSI - Июнь 17th, 2013 at 11:38

    Добавить можно, чтобы полнее было:
    10) Перебрать все элементы списка

    $(‘#my_select option’).each(function(){
    alert(“текст элемента option:”+this.text+”; значение элемента option:”+this.value);
    });

  28. #28 Den - Июль 13th, 2013 at 00:07

    Спасибо за полезную статью!

  29. #29 ilianna.ru - Июль 22nd, 2013 at 14:59

    Спасибо большое, постоянно возвращаюсь к это статье и постоянно она помогает…

  30. #30 amphibian - Сентябрь 18th, 2013 at 02:07

    sergei :
    Нет примера, если селект – объект, полученный ранее. Как тогда получить выбранный option?
    напр. var select = $(‘#my_select’);
    function getOption(select){
    var option = ???
    return option;
    }

    var option = $(this).find(“option:selected”);

  31. #31 Павел - Октябрь 24th, 2013 at 13:06

    Эти оба способа делают недоступным
    $(“#my_select”).attr(“disabled”,”disabled”);
    $(“#my_select”).attr(“disabled”,”");

    Что бы разблокировать я использовал:

    $(“#my_select”).removeAttr(“disabled”);

  32. #32 Никита - Ноябрь 6th, 2013 at 14:41

    Если у вас более старая версия jQuery и событие .on не работает, то сделать что-то когда пользователь выбрал что-то в селекте можно вот так:

    $("#my-select").change(function (){
    alert("777");
    });

  33. #33 sergey - Январь 6th, 2014 at 07:02

    4) Разблокировать
    $(“#my_select”).attr(“disabled”,”");

    Это неверно
    надо писать так:

    $(“#my_select”).removeAttr(“disabled”);

  34. #34 Айгуль - Январь 29th, 2014 at 13:43

    Недавно встала проблема о следующем.
    Есть элемент . Список, принадлежащий ему, нужно раскрыть после нажатия на импровизированную кнопку , допустим. То есть по сути перенести фокус на .
    Такое:
    $(‘.button’).click(function(){
    $(this).siblings(‘select’).focus();
    });
    не срабатывает.
    Как быть пока не знаю.

    P.S: кнопка является соседним элементом к select. Но в общем-то не важно.

  35. #35 Айгуль - Январь 29th, 2014 at 13:52

    Айгуль :
    Недавно встала проблема о следующем.
    Есть элемент <select>. Список, принадлежащий ему, нужно раскрыть после нажатия на импровизированную кнопку <div class=”button”>, допустим. То есть по сути перенести фокус на .
    Такое:
    $(‘.button’).click(function(){
    $(this).siblings(‘select’).focus();
    });
    не срабатывает.
    Как быть пока не знаю.
    P.S: кнопка является соседним элементом к select. Но в общем-то не важно.

    Теги потерлись…

  36. #36 jeffliker - Апрель 15th, 2014 at 15:38

    всем привет, помогите решить задачу:
    после выбора селекта, скрипт делает релоад страницы с добавлением GET-параметра, чтобы передать таким образом переменную js в php. Конечно, после такой перезагрузки теряется выбор в списке, хочу сделать примерно так:
    $(‘#format_sel [value=($.getURLParam("razmer"))]‘).attr(“selected”,”selected”);
    как видно, не получается в связи с отсутствием третьего вида кавычек =) в которые должно быть заключено значение value. как сделать чтобы работало?
    p.s.-пробовал задавать переменную со значением param1=$.getURLParam(“razmer”); не работает тоже((

  37. #37 jeffliker - Апрель 15th, 2014 at 16:07

    jeffliker :
    всем привет, помогите решить задачу:
    после выбора селекта, скрипт делает релоад страницы с добавлением GET-параметра, чтобы передать таким образом переменную js в php. Конечно, после такой перезагрузки теряется выбор в списке, хочу сделать примерно так:
    $(‘#format_sel [value=($.getURLParam("razmer"))]‘).attr(“selected”,”selected”);
    как видно, не получается в связи с отсутствием третьего вида кавычек =) в которые должно быть заключено значение value. как сделать чтобы работало?
    p.s.-пробовал задавать переменную со значением param1=$.getURLParam(“razmer”); не работает тоже((

    оле, всё получилось! сделал так:
    var param1 = $.getURLParam(“razmer”);
    $(“#format_sel”).val(param1);
    или, можно и так:
    $(“#format_sel”).val($.getURLParam(“razmer”));
    это работает тоже. ура!

  38. #38 adward - Май 14th, 2014 at 00:15

    Хотелось бы знать – какое событие появляется после того, как в селект добавились новые значения. Бывает так, что селект обносился и я хотел бы увидеть что произошло то..

  39. #39 Ильнур - Июнь 8th, 2014 at 02:24

    Как удалить элементы , которые пусты

  40. #40 Алексей - Июнь 27th, 2014 at 05:31

    А как сделать, чтобы выбранный в форме option оставался selected, пока не будет выбран другой (тогда другой должен стать selected) ?

  41. #41 bjq - Июль 5th, 2014 at 23:21

    attr()-позволяет получить или установить значение отдельных параметров тегов. Метод имеет несколько форматов.
    attr()
    attr(<Название параметрам )
    attr()
    attr(<Название параметрам )
    Первый формат метода позволяет получить значение указанного параметра для первого элемента коллекции. Если параметр не найден, то возвращается значение undefined.
    Второй формат метода attr () позволяет задать значение указанного параметра для всех элементов коллекции.
    Третий формат метода attr () позволяет задать сразу несколько параметров за один вызов метода. Для этого параметры и значения должны быть указаны следующим образом.
    {
    Параметр1: “Значение1″,
    Параметр2: “Значение2″,
    ПараметрN: “ЗначениеN”
    }
    Пример
    Напишем простой пример что при наведении мыши на блок (div id=”premer_content1″) выведем окошко (alert) с значением атрибута id.

  42. #42 Юрий - Август 11th, 2014 at 18:36

    Добрый день, довольно интересная подборка для select, но почему-то оно так просто не работает… Надо иногда навешивать события на данный элемент (bound)… Хотелось бы найти плагин для JQuery, который делает иерархию из элементов… Допустим – они все подгружены, выбираем в главном – город, отображается дочерний со списком районов… И так же – при выборе района – отображается список улиц в данном районе…. Ранее – находил, но видимо грохнул вместе с бесполезным проектом….

  43. #43 Sergey - Октябрь 30th, 2014 at 12:22

    Спасибо. Очень информативно, просто и понятно. Если еще голову включить то просто супер!

  44. #44 Сергей - Ноябрь 4th, 2014 at 15:39

    Внесу свою лепту.
    На счет пункта 14.
    $(“#my_select [value='2']“).attr(“selected”, “selected”);
    Можно сделать и так:
    $(“#my_select [value='2']“).prop(“selected”, true);

  45. #45 Александр Петров - Ноябрь 7th, 2014 at 16:40

    Отменная статья. Но еще бы хотелось, чтобы написали про работу остальных DOM-элементов при конкретно выбранных . К примеру в форме есть DIV, который должен выводиться лишь при выборе . Как только не пробовал, но все не то…
    Вот то, что вроде самое идеальное, но к сожалению. не работает. Ругается почему-то на .show
    $(document).ready(function(){
    $.viewInput = {
    ’0′ : $([]),
    ‘type2′ : $(‘#какой-то элемент, который или показывается или нет’),
    };
    $(‘#моя форма’).change(function() {
    $.each($.viewInput, function() { this.hide(); });
    $.viewInput[$(this).val()].show();
    });
    });

  46. #46 Mitrosoft - Декабрь 18th, 2014 at 11:41

    В п. 20
    Вместо
    this.selected=false;
    правильней
    $(this).removeAttr(‘selected’);
    И после всего
    $(‘#my_select”).val(“”);

  47. #47 Andriy - Январь 8th, 2015 at 13:01

    Спасибо тебе, добрый человек! Это как раз то, что мне нужно!

  48. #48 Слава - Январь 30th, 2015 at 22:19

    Добрыйдень, подскажите пожалусто

    Как при Лайф клике обратиться к Опции СЕЛЕКТА.
    Тоесть чтобы Функция КЛИК сробатывала во время выбора опции, а не при нажатии на селект

    Чтото типа такого: но етот вариант не работает :(
    jQuery(“select#lim_art option “).live(“click”, function(){
    // тут выполняется Ajax
    }

  49. #49 Владимир - Август 7th, 2015 at 12:07

    Подскажите пожалуйста как сделать видоизменение select при выпадении options?

  50. #50 Марина - Октябрь 30th, 2015 at 21:55

    Дай бог Вам здоровья!
    Сделала закладку и постоянно пользуюсь. Спасибо!

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.