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

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

  1. Получим значение value, выбранной опции:
  2. Получим текст выбранной опции:
  3. Сделать <select> недоступным:
  4. Разблокировать <select>
  5. Удалить выбранный элемент:
  6. Удалить первый элемент:
  7. Удалить последний элемент:
  8. Удалить элемент, у которого value=’Sochi’:
  9. Очистить весь список <select>
  10. Перебрать все элементы списка <select> и вывести в блок с id=«result»:
  11. Сделать выбранным последний элемент:
  12. Сделать выбранным второй элемент:
  13. Сделать выбранным элемент, содержащий текст ‘Новосибирск’:

    В первом и втором вариантах используем селектор по тексту :contains(text), который чувствителен к регистру. Третий вариант от регистра не зависит.
  14. Сделать выбранным элемент, value которого = St. Petersburg:
  15. Добавить элемент в начало списка <select>:
  16. Добавить элемент в конец списка <select>:
  17. Добавить новый элемент после третьего:
  18. Добавить несколько элементов option в список <select> из массива:
  19. Количество элементов option в списке <select>:
  20. Проверяем, выбран ли элемент в списке <select>:
  21. Сделать все элементы в списке <select> не выбранными:

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

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

  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-ый пункт 🙂

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

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