Jquery выбор option в select

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

Получим значение value, выбранной опции:

Получим текстовку выбранной опции:

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

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

$(«#town :first»).remove(); // будет удален Волгоград

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

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

$(«#town option[value=’Chelyabinsk’]»).remove();
$(«#town [value=’Chelyabinsk’]»).remove(); // сокращенно

Очистить весь список

Перебрать все элементы списка и вывести в блок с >

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

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

$(«#town :last»).attr(«selected», «selected»); // будет выбран Воронеж

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

$(«#town :nth-child(2)»).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), который чувствителен к регистру. Третий вариант от регистра не зависит.

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

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

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

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

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

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

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

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

jQuery работа с select

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

1) Самое простое – получить значение выбранного элемента

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

3) Сделать недоступным

4) Разблокировать

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

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

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

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

9) Очистить весь список

Читайте также:  Репутация монтера готика 3

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

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

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

13) Сделать выбранным элемент, содержащий текст ‘two’

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

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

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

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

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

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

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

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

На этом пока все.

Если что-то не упомянул, пишите в комментариях!

Добавлено — Воскресенье, Сентябрь 27th, 2009, 13:36 Раздел — jQuery, Заметки. Подписаться на RSS 2.0. Оставьте комментарий, или trackback с вашего сайта.

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

    Получим значение value , выбранной опции:

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

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

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

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

В 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… надо будет перепроверить &#128578;

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

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

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

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

Читайте также:  Как использовать ace stream

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

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

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