12

jQuery: Получение текста конкретного тега option

10

Предположим, у меня есть выпадающий список, например:

<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 ответ(ов)

12

Если вы хотите получить значение опции с значением 2, используйте:

$("#list option[value='2']").text();

Если вам нужно получить текущее выбранное значение, используйте:

$("#list option:selected").text();
11

Конечно! Если вы ищете элемент с id list, который имеет значение свойства value, равное 2, вы можете использовать следующий код:

$("#list option[value='2']").text()

Этот код находит дочерний элемент option у элемента с id list, у которого значение value равно 2, и возвращает текст этого элемента.

1

Это прекрасно сработало для меня. Я искал способ отправить два разных значения с помощью опций, сгенерированных MySQL, и следующее решение оказалась универсальным и динамическим:

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

Как упомянуто в одном из комментариев. С этим я смог создать динамическую функцию, которая работает со всеми моими элементами выборки и позволяет получать оба значения: значение опции и текст.

Несколько дней назад я заметил, что после обновления jQuery с версии 1.6 до 1.9 код перестал работать... вероятно, это был конфликт с другим фрагментом кода... В любом случае, решение заключалось в том, чтобы убрать option из вызова find():

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

Вот такое решение... используйте его, только если у вас возникли проблемы после обновления jQuery.

1

Исходя из оригинального HTML, размещённого Паоло, я пришёл к следующему решению:

$("#list").change(function() {
    alert($(this).find("option:selected").text() + ' clicked!');
});

Данный код был протестирован и работает в браузерах Internet Explorer и Firefox.

0

Вы можете использовать следующий код, чтобы получить текст всех выбранных значений из элемента с 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, а затем покажет их как строку, разделенную запятыми.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь