jQuery: Получение Выбранного Значения Из Выпадающего Списка
Описание проблемы:
Я обычно использую $("#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 ответ(ов)
Для получения выбранного текста из выпадающего списка вы, вероятно, захотите использовать что-то вроде следующего:
Для выбранного текста
var conceptName = $('#aioConceptName').find(":selected").text();
Для выбранного значения
var conceptName = $('#aioConceptName').find(":selected").val();
Причина, по которой val()
не срабатывает, заключается в том, что клик по опции не изменяет значение выпадающего списка — он просто добавляет свойство :selected
к выбранной опции, которая является дочерним элементом выпадающего списка.
Чтобы установить значения для каждого из вариантов в вашем селекте, вам нужно убедиться, что атрибуты 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>
заданы правильно, как в вашем примере.
Я наткнулся на этот вопрос и разработал более лаконичную версию ответа Эллиота Бонневиля:
var conceptName = $('#aioConceptName :selected').text();
или в общем виде:
$('#id :pseudoclass')
Это позволяет избежать дополнительного вызова jQuery, выбирает всё в один шаг и, на мой взгляд, более понятно.
Попробуйте это для получения значения выбранного элемента...
$("select#id_of_select_element option").filter(":selected").val();
Или это для получения текста...
$("select#id_of_select_element option").filter(":selected").text();
Эти команды используют jQuery для извлечения значения или текста из выбранного элемента в выпадающем списке.
Чтобы получить значение выбранного элемента в списке с идентификатором aioConceptName
, вы можете использовать следующий код на jQuery:
$('#aioConceptName option:selected').val();
Этот код выбирает элемент select
с заданным ID, затем через option:selected
находит выбранный вариант и получает его значение с помощью метода val()
. Убедитесь, что jQuery подключен к вашему проекту, чтобы этот код работал корректно.
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как проверить, отмечен ли чекбокс в jQuery?
Эквивалент document.createElement в jQuery?
Как выбрать элемент по имени с помощью jQuery?
Эквивалент jQuery $.ready() на чистом JavaScript - как вызвать функцию, когда страница/DOM готовы (дубликат)