jQuery: Получение текста конкретного тега option
Предположим, у меня есть выпадающий список, например:
<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>
С заданным значением '2'
(т.е. с использованием конкретного значения, не обязательно выбранного), какой селектор я могу использовать, чтобы получить "Option B"?
Я пробовал $("#list[value='2']").text();
, но это не сработало.
5 ответ(ов)
Если вы хотите получить значение опции с значением 2, используйте:
$("#list option[value='2']").text();
Если вам нужно получить текущее выбранное значение, используйте:
$("#list option:selected").text();
Конечно! Если вы ищете элемент с id list
, который имеет значение свойства value
, равное 2
, вы можете использовать следующий код:
$("#list option[value='2']").text()
Этот код находит дочерний элемент option
у элемента с id list
, у которого значение value
равно 2
, и возвращает текст этого элемента.
Это прекрасно сработало для меня. Я искал способ отправить два разных значения с помощью опций, сгенерированных MySQL, и следующее решение оказалась универсальным и динамическим:
$(this).find("option:selected").text();
Как упомянуто в одном из комментариев. С этим я смог создать динамическую функцию, которая работает со всеми моими элементами выборки и позволяет получать оба значения: значение опции и текст.
Несколько дней назад я заметил, что после обновления jQuery с версии 1.6 до 1.9 код перестал работать... вероятно, это был конфликт с другим фрагментом кода... В любом случае, решение заключалось в том, чтобы убрать option
из вызова find()
:
$(this).find(":selected").text();
Вот такое решение... используйте его, только если у вас возникли проблемы после обновления jQuery.
Исходя из оригинального HTML, размещённого Паоло, я пришёл к следующему решению:
$("#list").change(function() {
alert($(this).find("option:selected").text() + ' clicked!');
});
Данный код был протестирован и работает в браузерах Internet Explorer и Firefox.
Вы можете использовать следующий код, чтобы получить текст всех выбранных значений из элемента с ID #list
, когда у вас выбрано несколько значений:
$("#list option:selected").each(function() {
alert($(this).text());
});
Этот код выбирает все опции, которые были выбраны (т.е. имеют состояние selected
) в элементе списка с ID list
. Затем для каждой из этих опций вызывается функция, которая выводит текст опции в виде всплывающего окна (alert).
Если вам нужно, чтобы значения отображались в одной строке, вы можете использовать массив для хранения значений и затем объединить их перед выводом:
var selectedValues = [];
$("#list option:selected").each(function() {
selectedValues.push($(this).text());
});
alert(selectedValues.join(", "));
Этот код соберет все выбранные значения в массив selectedValues
, а затем покажет их как строку, разделенную запятыми.
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как получить дочерние элементы селектора $(this)?
Как выбрать элемент по имени с помощью jQuery?
Выбор и манипуляция псевдоэлементами CSS ::before и ::after с помощью JavaScript (или jQuery)
Добавление опций в <select> с помощью jQuery?