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

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($("", {
        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;
    });

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

15 комментариев

  1. В 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 автоматом вырезало 🙂

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

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

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

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

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

    $(«#town»).attr(«disabled»,»»);

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

    $(«#town»).removeAttr(«disabled»);

    1. или:

      $(«#town»).prop(«disabled», true);
      $(«#town»).prop(«disabled», false);

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

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

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

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

Оставить комментарий

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