Получить выбранное значение из выпадающего списка с помощью JavaScript
Вопрос: Как получить выбранное значение из выпадающего списка с помощью JavaScript?
Я работаю с HTML-формой, и у меня есть выпадающий список, в котором нужно получить выбранное значение. Вот код, который я использую:
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>
Мне нужно узнать, как я могу извлечь значение выбранного элемента из этого списка с помощью JavaScript. Есть ли какой-то простейший способ сделать это?
5 ответ(ов)
Вопрос: Как получить значение и текст выбранного элемента в
Ответ: У вас уже есть правильный код, который извлекает значение и текст выбранного элемента в выпадающем списке. Рассмотрим ваш HTML-код:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Когда вы выполняете следующий JavaScript-код:
var e = document.getElementById("ddlViewBy");
var value = e.value;
var text = e.options[e.selectedIndex].text;
Результаты будут такими:
value == "2"
text == "test2"
Пример с интерактивным изменением:
Вы также можете установить обработчик события onchange, чтобы отслеживать изменения в выпадающем списке и выводить текущее значение и текст выбранного элемента в консоль:
var e = document.getElementById("ddlViewBy");
function onChange() {
var value = e.value;
var text = e.options[e.selectedIndex].text;
console.log(value, text);
}
e.onchange = onChange;
onChange(); // Вызываем функцию один раз, чтобы вывести начальные значения
Полный код с элементом формы:
<form>
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
</form>
Этот подход позволяет вам легко получать значение и текст выбранного элемента с помощью JavaScript. Не забудьте, что значение (value) будет строкой, даже если оно выглядит как число.
Ваш код правильный и даст вам значение выбранного элемента:
var strUser = e.options[e.selectedIndex].value;
Если вам нужно получить текст выбранного элемента, используйте:
var strUser = e.options[e.selectedIndex].text;
Для ясности в терминологии, вот пример:
<select>
<option value="hello">Hello World</option>
</select>
У этого элемента есть:
- Индекс = 0
- Значение = hello
- Текст = Hello World
В данном коде выполняется получение значения выбранного элемента из выпадающего списка (select) с идентификатором "ddlViewBy". Чтобы перевести данное выражение на русский, можем сказать:
var выбранноеЗначение = document.getElementById("ddlViewBy").value;
Таким образом, переменная выбранноеЗначение будет содержать текущее выбранное значение из элемента с идентификатором "ddlViewBy".
Если вы когда-нибудь наткнетесь на код, написанный исключительно для Internet Explorer, вы можете увидеть следующее:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Запуск вышеуказанного кода в Firefox и других браузерах приведет к ошибке 'is not a function', потому что Internet Explorer позволяет использовать круглые скобки вместо квадратных:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Правильный способ - использовать квадратные скобки.
Есть два способа получить выбранное значение: с использованием JavaScript или jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert(getValue); // Это выведет выбранное значение.
ИЛИ
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert(value); // Это выведет выбранное значение.
alert(text); // Это выведет текст выбранного значения.
jQuery:
$("#ddlViewBy:selected").text(); // Текст выбранного значения
$("#ddlViewBy").val(); // Выводит значение ID 'ddlViewBy'
Как удалить все опции из выпадающего списка и добавить одну опцию, затем выбрать её с помощью jQuery?
jQuery: Получение текста конкретного тега option
Добавление опций в <select> с помощью jQuery?
Как перенаправить на другую веб-страницу?
Как проверить, содержит ли массив строку в TypeScript?