Jquery selected option text

Иногда возникает необходимость определить на jquery select текст выбранного элемента. Казалось бы, что это сделать очень просто:

Но не тут-то было! Этот вызов функции val вернет не текст option, а её значение value.
То есть мы не решили поставленную задачу.
Как быть? Как определить на jquery select текст выбранного элемента?

Решение: определить на jquery select текст выбранного элемента

Всё достаточно просто. Нужно пойти в обход, и сделать запрос с другой стороны, чтобы определить на jquery select текст выбранного элемента.
Смотрите:

Рассмотрим подробнее как работает приведенный выше код определить на jquery select текст выбранного элемента:
Мы выбираем только те элементы option конкретного select, которые обладают атрибутом selected. Таким атрибутом обладают только те, которые выделены, то есть те, которые нам нужны, и уже у этого элемента получаем значение text.

Всё очень просто, определить jquery select текст выбранного элемента 🙂

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

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

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

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

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

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

В 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;

Читайте также:  Проверка картриджа hp на оригинальность

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

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

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

если пользователь уже установил нужные ему 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);

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

All right, say I have this:

What would the selector look like if I wanted to get "Option B" when I have the value ‘2’?

Please note that this is not asking how to get the selected text value, but just any one of them, whether selected or not, depending on the value attribute. I tried:

But it is not working.

20 Answers 20

It’s looking for an element with id list which has a property value equal to 2. What you want is the option child of the list .

Читайте также:  Составить канонические уравнения эллипса гиперболы параболы

If you’d like to get the option with a value of 2, use

If you’d like to get whichever option is currently selected, use

This worked perfectly for me, I was looking for a way to send two different values with options generated by MySQL, and the following is generic and dynamic:

$(this).find("option:selected").text();

As mentioned in one of the comments. With this I was able to create a dynamic function that works with all my selection boxes that I want to get both values, the option value and the text.

Few days ago I noticed that when updating the jQuery from 1.6 to 1.9 of the site I used this code, this stop working. probably was a conflict with another piece of code. anyway, the solution was to remove option from the find() call:

That was my solution. use it only if you have any problem after updating your jQuery.