如何从 JavaScript 的下拉列表中获取选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8832375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get selected value from Dropdown list in JavaScript
提问by Somi Meer
How can you get the selected value from drop down list using JavaScript? I have tried the following but it does not work.
如何使用 JavaScript 从下拉列表中获取选定的值？我已经尝试了以下但它不起作用。
var sel = document.getElementById('select1');
var sv = sel.options[sel.selectedIndex].value;
alert(sv);
回答by Kangkan
It is working fine with me.
它对我很好。
I have the following HTML:
我有以下 HTML：
<div>
<select id="select1">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
<br/>
<button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>
And the following JavaScript:
以及以下 JavaScript：
function GetSelectedItem(el)
{
var e = document.getElementById(el);
var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
alert(strSel);
}
Seethat you are using the right id. In case you are using it with ASP.NET, the id changes when rendered.
查看您使用的 ID 是否正确。如果您将它与 ASP.NET 一起使用，则 id 在呈现时会发生变化。
回答by Shadow Wizard is Ear For You
Direct valueshould work just fine:
直接value应该工作得很好：
var sv = sel.value;
alert(sv);
The only reason your code might fail is when there is no item selected, then the selectedIndexreturns -1 and the code breaks.
您的代码可能失败的唯一原因是没有选择任何项目，然后selectedIndex返回 -1 并且代码中断。
回答by Kailas
Hope it's working for you
希望它对你有用
function GetSelectedItem()
{
var index = document.getElementById(select1).selectedIndex;
alert("value =" + document.getElementById(select1).value); // show selected value
alert("text =" + document.getElementById(select1).options[index].text); // show selected text
}
回答by Abi
Here is a simple example to get the selected value of dropdown in javascript
这是一个简单的示例，用于在 javascript 中获取下拉列表的选定值
First we design the UI for dropdown
首先我们为下拉菜单设计UI
<div class="col-xs-12">
<select class="form-control" id="language">
<option>---SELECT---</option>
<option>JAVA</option>
<option>C</option>
<option>C++</option>
<option>PERL</option>
</select>
Next we need to write script to get the selected item
接下来我们需要编写脚本来获取选中的项目
<script type="text/javascript">
$(document).ready(function () {
$('#language').change(function () {
var doc = document.getElementById("language");
alert("You selected " + doc.options[doc.selectedIndex].value);
});
});
Now When change the dropdown the selected item will be alert.
现在，当更改下拉菜单时，所选项目将发出警报。
回答by Varun Ved
According to Html5 specs you should use -- element.options[e.selectedIndex].text
根据 Html5 规范，您应该使用 -- element.options[e.selectedIndex]。文本
e.g. if you have select box like below :
例如，如果您有如下选择框：
<select id="selectbox1">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
<option value="3">Third</option>
</select>
<br/>
<button onClick="GetItemValue('selectbox1');">Get Item</button>
you can get value using following script :
您可以使用以下脚本获取价值：
<script>
function GetItemValue(q) {
var e = document.getElementById(q);
var selValue = e.options[e.selectedIndex].text ;
alert("Selected Value: "+selValue);
}
</script>
Tried and tested.
尝试和测试。
回答by mary_yaddah
I would say change var sv = sel.options[sel.selectedIndex].value; to var sv = sel.options[sel.selectedIndex].text;
我会说更改 var sv = sel.options[sel.selectedIndex].value; 到 var sv = sel.options[sel.selectedIndex].text;
It worked for me. Directing you to where I found my solution Getting the selected value dropdown jstl
它对我有用。将您引导至我找到我的解决方案的位置 获取选定的值下拉列表 jstl
