Как выбрать option в select jquery



Содержимое

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

Очень часто приходится сталкиваться с раскрывающимся списком

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

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

  • Сделать выбранным элемент, value которого = St. Petersburg:
  • Добавить элемент в начало списка :
  • Добавить элемент в конец списка :
  • Добавить новый элемент после третьего:
  • Добавить несколько элементов option в список из массива:
  • Количество элементов option в списке :
  • Проверяем, выбран ли элемент в списке :
  • Сделать все элементы в списке не выбранными:
  • Если у вас есть еще предложения или вопросы, пишите в комментариях!

    Похожие записи

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

    Спасибо, очень полезная информация, чётко по пунктам!

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

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

    var result = «»;
    $(‘#town option’).each(function() <
    result = result + this.text + «
    «;
    >);
    $(‘div#result’).html(result);

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

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

    В вашем варианте проблема не столько в br, сколько в обращении к option — $(‘#town option option:selected’)

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

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

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

    я разобрался, лучше писать $(«#town :last»).prop(«selected», «selected»);
    тогда все работает

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

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

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

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

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

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

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

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

    Источник статьи: http://codernote.ru/jquery/rabota-s-elementom-select-iz-jquery/

    Как выбрать конкретный параметр в элементе SELECT в jQuery?

    Если вы знаете индекс, значение или текст. также, если у вас нет ID для прямой ссылки.

    этой, этой и этой все полезные ответы.

    19 ответов

    селектор, чтобы получить средний вариант-элемент, значение

    редактировать: как отмечалось выше, OP, возможно, был после изменения выбранного элемента раскрывающегося списка. В версии 1.6 и выше рекомендуется метод prop ():

    EDIT2: после комментария Райана. Матч на «Выбор 10» может быть нежелательным. Я не нашел селектор чтобы соответствовать полному тексту, но фильтр работает:

    EDIT3: будьте осторожны с $(e).text() поскольку он может содержать новую строку, что делает сравнение неудачным. Это происходит, когда параметры неявно закрыты (no tag):

    используя jquery-2.1.4, Я нашел следующий ответ, чтобы работать на меня:

    Если у вас есть строковое значение, попробуйте следующее:

    другие примеры не работали для меня, поэтому я добавляю этот ответ.

    Я использую это, когда я знаю, что индекс списка.

    это позволяет изменить список и запустить событие change. «: Nth(n) » отсчитывается от индекса 0

    для установки выберите значение с выбранным запуском:

    для настройки опции из области:

    этот код использует селектор, чтобы узнать объект select с условием, а затем изменить выбранный атрибут на attr() .

    Futher, я рекомендую добавить change() событие после установки атрибута selected , сделав это, код будет близок к изменению выбора пользователем.

    для выбранного Jquery, если вы отправляете атрибут в функцию и вам нужно обновить-выберите опцию

    Источник статьи: http://askdev.ru/q/kak-vybrat-konkretnyy-parametr-v-elemente-select-v-jquery-1457/

    jQuery работа с Select

    При разработке интернет магазинов очень важно сделать их не просто красивыми, но и удобными. Это будет большим плюсом для покупателей и поисковых систем. Интернет-магазин должен максимально быстро помогать пользователю сделать выбор. Например, в подборе товаров интернет магазина одежды, при выборе покупателем 52 размера, все остальные параметры (тип, цвет, состав и др.) должны автоматически меняться на те значения, которые относятся к 52 размеру.

    Рассмотрим примеры управление выподающими списками:

    1. Снять выбранный элемент

    2. Получить значение выбранного элемента

    Получить значение value выбранного элемента option

    Получить значение текста выбранного элемента

    3. Выбор элемента

    Выбрать элемент со значением value равным 4

    Выбрать последний элемент

    Выбрать элемент содержащий слово «Разработка сайтов»

    4. Удаление элемента option

    Удалить элемент option со значением value равным 3

    Удалить последний элемент

    Удалить все элементы содержащие слово «интернет»

    5. Блокировка элементов

    Заблокировать элемент со значением value равным 4

    Заблокировать второй элемент

    Заблокировать первый элемент

    Заблокировать последний элемент

    Заблокировать все элементы содержащие слово «интернет»

    6. Разблокировка элементов

    Разблокировать элемент со значением value равным 4

    Разблокировать второй элемент

    Разблокировать первый элемент

    Разблокировать последний элемент

    Разблокировать все элементы содержащие слово «интернет»

    7. Добавление элементов

    Добавить в самое начала Select

    Добавить в самый конец Select

    Добавить после второго элемента

    Добавить после элемента со значением 4

    Добавить до элемента со значением 4

    8. Изменение элемента option

    Поменяем текст тега option у выбранного элемента

    Поменяем значение атрибута value у выбранного элемента

    Тут как и в других примерах вы можете использовать селекторы для поиска тега option, например:

    И как обычно небольшой пример:

    Пример работы примера:

    Снять выбранный элемент Выбираем 4-ый элемент! Удаляем первый элемент

    Заблокировать второй элемент Разблокировать второй элемент Добавить в самое начала Select Изменить текст

    Комментарии (Написать комментарий)

    Комментарий:
    Рассмотрим примеры управление выпОдающими списками: :)

    Источник статьи: http://blog.ox2.ru/js/jquery-select/

    jQuery работа с выпадающим списком select (пример)

    Очень часто приходится сталкиваться с выпадающим HTML списком

    Обратите внимание на то, что также был добавлен пустой элемент списка, это нам пригодится, чтобы проверить выбран хоть один элемент списка или нет, а также для сброса выбора.

    1 — Получить значение выбранного элемента:

    2 — Получить текст того же выбранного элемента:

    5 — Удалить выбранный элемент:

    6 — Удалить первый элемент:

    7 — Удалить последний элемент:

    8 — Удалить элемент, у которого value=’2′:

    10 — Перебрать все элементы списка :

    11 — Сделать выбранным последний элемент:

    12 — Сделать выбранным второй элемент:

    13 — Сделать выбранным элемент, содержащий текст ‘Второе поле имеет значение value=2’:

    14 — Сделать выбранным элемент, value которого = 2:

    15 — Добавить элемент в начало списка :

    16 — Добавить элемент в конец списка :

    17 — Добавить новый элемент после второго:

    18 — Количество элементов option в списке :

    19 — Проверяем, выбран ли элемент в списке :

    20 — Сделать все элементы в списке не выбранными:

    21 — Добавить несколько элементов option в список из массива:

    Так же Вы можете скачать пример работы скрипта из вложения в конце статьи для большего понимания.

    Полагаю этого вполне достаточно для управления списками. Если у Вас есть, что дополнить к этому, пишите в комментариях.

    Источник статьи: http://blog-about.ru/blog/jquery-rabota-s-vypadayushhim-spiskom-select-primer/

    Как выбрать option в select jquery

    В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.

    Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.

    Бесплатные уроки HTML для начинающих

    Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».

    Лайфхак: наиполезнейшая функция var_export()

    При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

    17 бесплатных шаблонов админок

    Парочка бесплатных шаблонов панелей администрирования.

    30 сайтов для скачки бесплатных шаблонов почтовых писем

    Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.

    Как осуществить задержку при нажатии клавиши с помощью jQuery?

    К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

    15 новых сайтов для скачивания бесплатных фото

    Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.

    50+ бесплатных Bootstrap 3 шаблонов и элементов UI

    Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.

    Зум слайдер

    Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.

    Источник статьи: http://ruseller.com/lessons.php?rub=1&id=2467


    Adblock
    detector