Работа с элементом select из jQuery
Очень часто приходится сталкиваться с раскрывающимся списком
<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>
- Получим значение
value
, выбранной опции:$("#town").val(); // Novosibirsk
- Получим текст выбранной опции:
$("#town option:selected").text(); // Новосибирск
- Сделать
<select>
недоступным:$("#town").attr("disabled", "disabled");
- Разблокировать
<select>
$("#town").attr("disabled","");
- Удалить выбранный элемент:
$("#town :selected").remove(); // будет удален Новосибирск
- Удалить первый элемент:
$("#town :first").remove(); // будет удалена Москва
- Удалить последний элемент:
$("#town :last").remove(); // будет удалена Казань
- Удалить элемент, у которого value=’Sochi’:
$("#town option[value='Sochi']").remove(); $("#town [value='Sochi']").remove(); // сокращенно
- Очистить весь список
<select>
$("#town").empty();
- Перебрать все элементы списка
<select>
и вывести в блок с id=«result»:var result = ""; $('#town option').each(function(){ result = result + this.text + "<br/>"; }); $('div#result').html(result);
- Сделать выбранным последний элемент:
$("#town :last").attr("selected", "selected"); // будет выбрана Казань
- Сделать выбранным второй элемент:
$("#town :nth-child(2)").attr("selected", "selected"); // будет выбран Санкт-Петербург
- Сделать выбранным элемент, содержащий текст ‘Новосибирск’:
// Первый вариант $("#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)
, который чувствителен к регистру. Третий вариант от регистра не зависит. - Сделать выбранным элемент, value которого = St. Petersburg:
$("#town option[value='St. Petersburg']").attr("selected", "selected");
- Добавить элемент в начало списка <select>:
$("#town").prepend('<option value="Ryazan">Рязань</option>');
- Добавить элемент в конец списка <select>:
$("#twon").append('<option value="Samara">Самара</option>');
- Добавить новый элемент после третьего:
$("#town option:nth-child(3)").after('<option value="Voronezh">Воронеж</option>');
- Добавить несколько элементов option в список <select> из массива:
var newOptions = { "Ryaza": "Рязань", "Samara": "Самара" }; $.each(newOptions, function(key, value) { $('#town').append($('<option>', { value: key, text: value })); });
- Количество элементов option в списке <select>:
$("select[id=town] option").size();
- Проверяем, выбран ли элемент в списке <select>:
if ( $("#town").val() ) {...}
- Сделать все элементы в списке <select> не выбранными:
$('#town option:selected').each(function(){ this.selected=false; });
Если у вас есть еще предложения или вопросы, пишите в комментариях!
Спасибо, очень полезная информация, чётко по пунктам!
В 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”).attr(“disabled”,””);
не катит. Нужно писать следующее:
$(“#town”).removeAttr(“disabled”);
или:
$(“#town”).prop(“disabled”, true);
$(“#town”).prop(“disabled”, false);
для блокировки и разблокировки соответственно.
Добрый день, спасибо за статью, только можете обьяснить один момент, зачем в этом примере – $()?
$(“#town”).prepend( $(‘Рязань’) )
Почему нельзя просто?
$(“#town”).prepend(‘Рязань’)
Вроде и так и так работает, не могу понять что означает $() внутри prepend?
Добрый день. Конечно могу 🙂 Это банальная опечатка – копипастил код из примеров выше и не удалил $() вот и всё. Спасибо за внимательность – поправил 😉
Спасибо, просто думал мало ли какой то смысл есть, еще только постигаю jquery, вот и решил уточнить… Особенно после того как недавно столкнулся с разницей в $(this), this и $(this)[0].
Как работать с jquery объектом select без его id? Нет таких примеров.
Рахим, работать с объектом select без обращения по id можно точно так же как и с другими элементами дерева DOM. Если вам нужен конкретный пример – отправная точка дерева – могу расписать, но описывать все варианты это можно целую статью написать 🙂
Вы бы переписали статью, а то, как видно из комментов, она не актуальна, да и вы научились делать лучше и правильнее.
Когда пользователь находит вашу статью, то он читает в первую очередь статью, а не комментарии.
Возникла потребность программно выбирать пункт списка, но не получается.
Откройте это меню выбора
Один
Два
Три
Вариант с явным заданием value работает прекрасно:
$(“#idSelectList option[value=2]”).prop(“selected”, true);
Однако, по сути тоже самое:
var varValue = 2;
$(“#idSelectList option[value=varValue]”).prop(“selected”, true);
(с кавычками или без них) молчит “как партизан”.
Это принципиальный косяк или я что-то не понимаю?
Вот так:
$("#idSelectList option[value="+varValue+"]").prop("selected", true);
В вашем варианте получается что вы не присваиваете переменную, а пытаетесь выбрать опцию с каким-то varValue.
Нет, этот фокус тоже не проходит – проверил на своём примерчике. Кстати, у Вас ошибочка (описка) – кавычки в этой дичи должны быть одинарными [value=’+varValue+’]”
Ошибки нет, все написано правильно и все работает.
Можете убедиться в этом – https://codepen.io/AmateR/pen/RwBmJRQ
Да, всё пошло, спасибо! Единственно пришлось по всем канонам, как учили, переоформить скрипт:
$(function () {
$(“button”).click(function () {
var varValue = “Moscow”;
$(“#town option[value=” + varValue + “]”).prop(“selected”, true);
});
})
Как в примере почему-то отказалось работать. Видимо это какой-то привет от Visual Studio.
Меня смутили кавычки: + “]”).prop(
Занесу это теперь в свои “скрижали”. Может и вам в вашей замечательной статье это необходимо отметить?
С уважением ВВГ
18. Добавить несколько элементов option в список из массива (? наверно это уже объект?):
Добрый день!
Скопировал скрипт с точностью до запятой, но не работает. В статическом варианте (16. Добавить …) всё получилось замечательно. Может проверите у себя этот 18-й вариант?
С уважением ВВГ
Добрый день!
Не помню почему написал так, может быть так и было задумано, но не работает из-за того, в примере “потерялось” наименование тега – “option” (в угловых скобках). Пример поправил, пробуйте – у меня работает 🙂
Да, всё ОК! Спасибо!
С уважением ВВГ
PS: Неплохо было бы отсортировать комментарии, чтобы самые последние были наверху. А может и галочку поставить чтобы было и так, и так.
$(function () {
// Формируем массив строк …
var townList = Array();
var li_obj = $(“#idUl li”);
// список HTMLLI – элементов
townList = $.makeArray(li_obj);
// Для контроля – отображение списка
$(townList).appendTo($(“#idResult”));
// Выделение текста из – элемента
var townListText = Array(); // Только Array ????
$.each(townList, function (k, el) {
var txt = el.textContent;
townListText.push(txt);
});
// Попытка занесения полученного списка в select
$.each(townListText, function (key, value) {
$(‘#idTown’).append($(”, {
value: key,
text: value
}));
});
})
select {
border: solid 2px black !important;
}
Отображение массива
43: Москва
21: Тверь
3: Вологда
68: Архангельск
@* для проверки *@
@* Отображение select *@