Работа с элементом select из jQuery

by Опубликовано

Jquery работа с selectОчень часто приходится сталкиваться с раскрывающимся списком <select>, поэтому набралась небольшая коллекция советов. Элементы <select> обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

<select id="town">
  <option value="Moscow">Москва</option>
  <option value="St. Petersburg">Санкт-Петербург</option>
  <option value="Sochi">Сочи</option>
  <option value="Novosibirsk" selected>Новосибирск</option>
  <option value="Kazan">Казань</option>
</select>
  1. Получим значение value, выбранной опции: 
    $("#town").val(); // Novosibirsk
  2. Получим текст выбранной опции: 
    $("#town option:selected").text(); // Новосибирск
  3. Сделать <select> недоступным: 
    $("#town").attr("disabled", "disabled");
  4. Разблокировать <select> 
    $("#town").attr("disabled","");
  5. Удалить выбранный элемент: 
    $("#town :selected").remove(); // будет удален Новосибирск
  6. Удалить первый элемент: 
    $("#town :first").remove(); // будет удалена Москва
  7. Удалить последний элемент: 
    $("#town :last").remove(); // будет удалена Казань
  8. Удалить элемент, у которого value=’Sochi’: 
    $("#town option[value='Sochi']").remove();
$("#town [value='Sochi']").remove(); // сокращенно
  9. Очистить весь список <select> 
    $("#town").empty();
  10. Перебрать все элементы списка <select> и вывести в блок с id=«result»: 
    var result = "";
$('#town option').each(function(){
  result = result + this.text + "<br/>";
});
$('div#result').html(result);
  11. Сделать выбранным последний элемент: 
    $("#town :last").attr("selected", "selected"); // будет выбрана Казань
  12. Сделать выбранным второй элемент: 
    $("#town :nth-child(2)").attr("selected", "selected"); // будет выбран Санкт-Петербург
  13. Сделать выбранным элемент, содержащий текст ‘Новосибирск’: 
    // Первый вариант
$("#town :contains('Новосибирск')").attr("selected", "selected");               

// Второй вариант
$("#town").find("option:contains('Новосибирск')").attr("selected", "selected");

// Третий вариант (не зависит от регистра)
var opt = $('option');
opt.each(function(indx, element){
  if ( $(this).text().toLowerCase() == 'Новосибирск'.toLowerCase() ) {$(this).attr("selected", "selected");}
});

    В первом и втором вариантах используем селектор по тексту :contains(text), который чувствителен к регистру. Третий вариант от регистра не зависит.

  14. Сделать выбранным элемент, value которого = St. Petersburg: 
    $("#town option[value='St. Petersburg']").attr("selected", "selected");
  15. Добавить элемент в начало списка <select>: 
    $("#town").prepend('<option value="Ryazan">Рязань</option>');
  16. Добавить элемент в конец списка <select>: 
    $("#twon").append('<option value="Samara">Самара</option>');
  17. Добавить новый элемент после третьего: 
    $("#town option:nth-child(3)").after('<option value="Voronezh">Воронеж</option>');
  18. Добавить несколько элементов option в список <select> из массива: 
    var newOptions = {
"Ryaza": "Рязань",
"Samara": "Самара"
};

$.each(newOptions, function(key, value) {
  $('#town').append($('<option>', {
    value: key,
    text: value
  }));
});
  19. Количество элементов option в списке <select>: 
    $("select[id=town] option").size();
  20. Проверяем, выбран ли элемент в списке <select>: 
    if ( $("#town").val() ) {...}
  21. Сделать все элементы в списке <select> не выбранными: 
    $('#town option:selected').each(function(){
  this.selected=false;
});

Если у вас есть еще предложения или вопросы, пишите в комментариях!

Опубликовано Алексей

27 ответов к «Работа с элементом select из jQuery»

  2. В 10 примере пару ошибок, правильно так:
    var result;
    $(‘#town option option:selected’).each(function(){
    result = result + this.text + ”;
    });
    $(‘div#result’).html(result);

    Ответить

    1. Согласен, что есть ошибки, но правильно будет так:

      var result = "";
      $('#town option').each(function(){
      result = result + this.text + "
      ";
      });
      $('div#result').html(result);

      Статью писал, когда только начинал разбираться с jQuery… надо будет перепроверить 🙂

      Ответить

      1. Спасибо за уточнение, в моём предыдущем сообщении, тег br автоматом вырезало 🙂

        Ответить

  3. Алексей,
    13 вариант, поиск регистроЗависимый, изменяя регистр буквы поиск не работает.

    Ответить

    1. Совершенно верно, ведь селектор по тексту :contains чувствителен к регистру. Если необходимо выполнить поиск не зависимо от регистра, можно перебрать все пункты в цикле, переводя значения к нижнему регистру и сравнивая с искомым текстом. Добавил этот вариант в 13-ый пункт 🙂

      Ответить

  4. если пользователь уже установил нужные ему option в $(“#town”), то если нужно их изменить при каких-то определенных условиях (например, поезда туда не ходят), метод $(“#town :last”).attr(“selected”, “selected”); не работает. Элемент option все ровно остается таким, какой выбрал пользователь.

    Ответить

      1. Руслан, действительно начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано, т.е. для получения и выставления таких опций как checked, selected, или disabled нужно использовать метод .prop() Подробнее можно почитать в статье работа со свойствами. Спасибо вам за замечание, обновлю статью.

        Ответить

  5. JQuery 3.4.1. Для разблокировки селекта строка

    $(“#town”).attr(“disabled”,””);

    не катит. Нужно писать следующее:

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

    Ответить

    1. или:

      $(“#town”).prop(“disabled”, true);
      $(“#town”).prop(“disabled”, false);

      для блокировки и разблокировки соответственно.

      Ответить

  6. Добрый день, спасибо за статью, только можете обьяснить один момент, зачем в этом примере – $()?
    $(“#town”).prepend( $(‘Рязань’) )
    Почему нельзя просто?
    $(“#town”).prepend(‘Рязань’)
    Вроде и так и так работает, не могу понять что означает $() внутри prepend?

    Ответить

    1. Добрый день. Конечно могу 🙂 Это банальная опечатка – копипастил код из примеров выше и не удалил $() вот и всё. Спасибо за внимательность – поправил 😉

      Ответить

      1. Спасибо, просто думал мало ли какой то смысл есть, еще только постигаю jquery, вот и решил уточнить… Особенно после того как недавно столкнулся с разницей в $(this), this и $(this)[0].

        Ответить

    1. Рахим, работать с объектом select без обращения по id можно точно так же как и с другими элементами дерева DOM. Если вам нужен конкретный пример – отправная точка дерева – могу расписать, но описывать все варианты это можно целую статью написать 🙂

      Ответить

  8. Вы бы переписали статью, а то, как видно из комментов, она не актуальна, да и вы научились делать лучше и правильнее.

    Когда пользователь находит вашу статью, то он читает в первую очередь статью, а не комментарии.

    Ответить

  9. Возникла потребность программно выбирать пункт списка, но не получается.

    Откройте это меню выбора
    Один
    Два
    Три

    Вариант с явным заданием value работает прекрасно:
    $(“#idSelectList option[value=2]”).prop(“selected”, true);

    Однако, по сути тоже самое:
    var varValue = 2;
    $(“#idSelectList option[value=varValue]”).prop(“selected”, true);
    (с кавычками или без них) молчит “как партизан”.
    Это принципиальный косяк или я что-то не понимаю?

    Ответить

    1. Вот так:
      $("#idSelectList option[value="+varValue+"]").prop("selected", true);

      В вашем варианте получается что вы не присваиваете переменную, а пытаетесь выбрать опцию с каким-то varValue.

      Ответить

  10. Нет, этот фокус тоже не проходит – проверил на своём примерчике. Кстати, у Вас ошибочка (описка) – кавычки в этой дичи должны быть одинарными [value=’+varValue+’]”

    Ответить

      1. Да, всё пошло, спасибо! Единственно пришлось по всем канонам, как учили, переоформить скрипт:

        $(function () {
        $(“button”).click(function () {
        var varValue = “Moscow”;
        $(“#town option[value=” + varValue + “]”).prop(“selected”, true);
        });
        })

        Как в примере почему-то отказалось работать. Видимо это какой-то привет от Visual Studio.
        Меня смутили кавычки: + “]”).prop(
        Занесу это теперь в свои “скрижали”. Может и вам в вашей замечательной статье это необходимо отметить?
        С уважением ВВГ

        Ответить

  11. 18. Добавить несколько элементов option в список из массива (? наверно это уже объект?):
    Добрый день!
    Скопировал скрипт с точностью до запятой, но не работает. В статическом варианте (16. Добавить …) всё получилось замечательно. Может проверите у себя этот 18-й вариант?
    С уважением ВВГ

    Ответить

    1. Добрый день!
      Не помню почему написал так, может быть так и было задумано, но не работает из-за того, в примере “потерялось” наименование тега – “option” (в угловых скобках). Пример поправил, пробуйте – у меня работает 🙂

      Ответить

      1. Да, всё ОК! Спасибо!
        С уважением ВВГ
        PS: Неплохо было бы отсортировать комментарии, чтобы самые последние были наверху. А может и галочку поставить чтобы было и так, и так.

        Ответить

      2. $(function () {
        // Формируем массив строк …
        var townList = Array();
        var li_obj = $(“#idUl li”);
        // список HTMLLI – элементов
        townList = $.makeArray(li_obj);

        // Для контроля – отображение списка
        $(townList).appendTo($(“#idResult”));

        // Выделение текста из – элемента
        var townListText = Array(); // Только Array ????
        $.each(townList, function (k, el) {
        var txt = el.textContent;
        townListText.push(txt);
        });

        // Попытка занесения полученного списка в select
        $.each(townListText, function (key, value) {
        $(‘#idTown’).append($(”, {
        value: key,
        text: value
        }));
        });
        })

        select {
        border: solid 2px black !important;
        }

        Отображение массива

        43: Москва
        21: Тверь
        3: Вологда
        68: Архангельск

        @* для проверки *@

        @* Отображение select *@

        Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *