14

jQuery: Получение Выбранного Значения Из Выпадающего Списка

20

Описание проблемы:

Я обычно использую $("#id").val() для получения значения выбранного варианта в списке, но в этот раз это не работает. Тег, у которого я пытаюсь получить значение, имеет идентификатор aioConceptName.

HTML код:

<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Помогите, пожалуйста, разобраться, почему $("#aioConceptName").val() не возвращает ожидаемое значение.

5 ответ(ов)

23

Для получения выбранного текста из выпадающего списка вы, вероятно, захотите использовать что-то вроде следующего:

Для выбранного текста

var conceptName = $('#aioConceptName').find(":selected").text();

Для выбранного значения

var conceptName = $('#aioConceptName').find(":selected").val();

Причина, по которой val() не срабатывает, заключается в том, что клик по опции не изменяет значение выпадающего списка — он просто добавляет свойство :selected к выбранной опции, которая является дочерним элементом выпадающего списка.

4

Чтобы установить значения для каждого из вариантов в вашем селекте, вам нужно убедиться, что атрибуты value заданы правильно для каждого элемента <option>. В вашем примере это уже сделано:

<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

Однако, если вы пытаетесь получить выбранное значение с помощью $('#aioConceptName').val(), а код не работает, это может быть связано с тем, что выбранный элемент <option> не установлен или не совпадает с тем, что вы ожидаете. Если вы хотите установить выбранное значение селекта, используйте следующий код:

$('#aioConceptName').val('1'); // Устанавливаем значение '1' ( roma )

Теперь, после того как значение установлено, вызов $('#aioConceptName').val() должен вернуть корректное значение:

console.log($('#aioConceptName').val()); // Должно вывести '1'

Таким образом, вам не нужно использовать хитрости с :selected, когда вы можете просто установить значение с помощью .val(). Убедитесь, что перед вызовом .val() атрибуты value на <option> заданы правильно, как в вашем примере.

2

Я наткнулся на этот вопрос и разработал более лаконичную версию ответа Эллиота Бонневиля:

var conceptName = $('#aioConceptName :selected').text();

или в общем виде:

$('#id :pseudoclass')

Это позволяет избежать дополнительного вызова jQuery, выбирает всё в один шаг и, на мой взгляд, более понятно.

0

Попробуйте это для получения значения выбранного элемента...

$("select#id_of_select_element option").filter(":selected").val();

Или это для получения текста...

$("select#id_of_select_element option").filter(":selected").text();

Эти команды используют jQuery для извлечения значения или текста из выбранного элемента в выпадающем списке.

0

Чтобы получить значение выбранного элемента в списке с идентификатором aioConceptName, вы можете использовать следующий код на jQuery:

$('#aioConceptName option:selected').val();

Этот код выбирает элемент select с заданным ID, затем через option:selected находит выбранный вариант и получает его значение с помощью метода val(). Убедитесь, что jQuery подключен к вашему проекту, чтобы этот код работал корректно.

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