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

Очень часто приходится сталкиваться с выпадающим HTML списком <select>, и тогда возникают вопросы, как можно управлять им. Данная статья посвящена некоторым селекторам jQuery для работы со списком <select>.

Как это работает?

Для начала определим простенький выпадающий список, чтобы наглядно показать работу селекторов:

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

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

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

3 — Сделать <select> недоступным:

4 — Разблокировать <select>:

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

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

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

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

9 — Очистить весь список <select>:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
4,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

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

* - поля обязательные для заполнения. E-mail не публикуется.