Как получить выбранное значение из выпадающего списка, используя JavaScript?
Я попробовал методы ниже, но все они возвращают выбранный индекс вместо значения:
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Если у вас есть элемент select, который выглядит следующим образом:
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Запуск этого кода:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Сделал бы strUser be 2. Если вы действительно хотите, test2, сделайте следующее:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
Что бы сделать strUser be test2
Простой JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
JQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];
var strUser = e.options[e.selectedIndex].value;
Это правильно и должно дать вам значение. Это текст, который вам нужен?
var strUser = e.options[e.selectedIndex].text;
Итак, вы поняли терминологию:
<select>
<option value="hello">Hello World</option>
</select>
Эта опция имеет:
Следующий код демонстрирует различные примеры, связанные с получением/помещением значений из полей ввода/выбора с использованием JavaScript.
Рабочая Демо
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
Следующий скрипт получает значение выбранного параметра и помещает его в текстовое поле 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
Следующий скрипт получает значение из текстового поля 2 и оповещает его значением
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
Следующий скрипт вызывает функцию из функции
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>
var selectedValue = document.getElementById("ddlViewBy").value;
Если вы когда-нибудь сталкивались с кодом, написанным исключительно для Internet Explorer, вы можете увидеть это:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Запуск вышеупомянутого в Firefox и др. Даст вам ошибку "не является функцией", потому что Internet Explorer позволяет вам избежать использования() вместо []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Правильный способ - использовать квадратные скобки.
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Любое поле ввода/формы может использовать ключевое слово "this", когда вы обращаетесь к нему из элемента. Это устраняет необходимость поиска формы в дереве dom, а затем размещения этого элемента внутри формы.
Начинающие, вероятно, захотят получить доступ к значениям из атрибута select с атрибутом NAME, а не с атрибутом ID. Мы знаем, что все элементы формы нуждаются в именах, даже до того, как они получают идентификаторы.
Итак, я добавляю решение getElementByName(), чтобы новые разработчики тоже видели.
NB. имена элементов формы должны быть уникальными для того, чтобы ваша форма могла быть использована после публикации, но DOM может разрешить совместное использование имени более чем одним элементом. По этой причине рассмотрите возможность добавления идентификаторов к формам, если можете, или явным образом с именами элементов формы my_nth_select_named_x и my_nth_text_input_named_y.
Пример использования getElementByName:
var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Просто используйте
$('#SelectBoxId option:selected').text(); для получения текста, указанного в списке
$('#SelectBoxId').val(); для получения выбранного значения индекса
Предыдущие ответы все еще оставляют место для улучшения из-за возможностей, интуитивности кода и использования id сравнении с name. Можно получить данные трех данных выбранного параметра - его номер индекса, его значение и текст. Этот простой кросс-браузерный код выполняет все три функции:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\ index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Демонстрационная версия: http://jsbin.com/jiwena/1/edit?html,output.
id следует использовать для макияжа. Для целей функциональной формы name все еще допустимо, также в HTML5, и все еще должно использоваться. Наконец, не забывайте использовать квадратные или круглые скобки в определенных местах. Как было объяснено ранее, только (более старые версии) Internet Explorer будет принимать круглые во всех местах.
Используя jQuery:
$('select').val();
Есть два способа сделать это, используя JavaScript или jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
ИЛИ ЖЕ
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
JQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'
Вы можете использовать querySelector.
например.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;
Запуск примера того, как он работает:
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>Другое решение:
document.getElementById('elementId').selectedOptions[0].value
В 2015 году в Firefox выполняется следующее.
е. опции.selectedIndex
Чтобы согласиться с предыдущими ответами, вот как я делаю это как однострочник. Это для получения фактического текста выбранной опции. Есть хорошие примеры для получения номера индекса уже. (А для текста я просто хотел показать это так)
var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
В некоторых редких случаях вам может понадобиться использовать скобки, но это будет очень редко.
var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
Я сомневаюсь, что это происходит быстрее, чем двухстрочная версия. Мне просто нравится как можно больше консолидировать свой код.
К сожалению, это все еще выбирает элемент дважды, что не идеально. Метод, который захватывает элемент только один раз, был бы более полезным, но я еще не понял, что делать это с одной строкой кода.
Вот строка кода JavaScript:
var x = document.form1.list.value;
Предполагая, что выпадающее меню с именем list name="list" и включено в форму с атрибутом name name="form1".
У меня немного другое мнение о том, как этого добиться. Обычно я делаю это следующим способом (насколько мне известно, это более простой способ и работает с каждым браузером):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>
Единственная причина, по которой я могу видеть, что этот код не работает, - это использование IE7- и забыли указать атрибут value для вашего <option> -tags... Каждый другой браузер должен преобразовать то, что внутри open- закрыть теги в качестве значения параметра.
Просто сделайте: document.getElementById('idselect').options.selectedIndex
Затем вы получите значение индекса, начиная с 0.
Вы можете просто использовать selectElement.value чтобы получить значение выбранного параметра select.
document.getElementById("idOfSelect").value;
var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
res.textContent = "Selected Value: "+select.value;
});<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>Вот простой способ сделать это в функции onchange:
event.target.options[event.target.selectedIndex].dataset.name