如何使用JavaScript从下拉列表中获取所选值？
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
给定如下所示的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 value = e.value;
var text = e.options[e.selectedIndex].text;
结果如下：
value == 2
text == "test2"
交互示例：
var e=document.getElementById（“ddlViewBy”）；函数onChange（）{var值=e.value；var text=e.options[e.selectedIndex].text；console.log（值，文本）；}e.onchange=onchange；onChange（）；<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
其他回答
您应该使用querySelector来实现这一点。这也规范了从表单元素获取值的方式。
var dropDownValue=document.querySelector（'#ddlViewBy'）.value；
小提琴：https://jsfiddle.net/3t80pubr/
这里的大多数答案通过纯文本JavaScript选择器获取“this”select菜单的值。
例如：
document.getElementById("ddlViewBy").value;
这不是干式方法。
DRY（三行代码）：
function handleChange(e) {
let innerText = e.target[e.target.options.selectedIndex].innerText;
let value = e.target.value;
/* Do something with these values */
}
获取第一个选择选项：
console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/
考虑到这个想法，我们动态返回一个“this”选择选项项（通过selectedIndex）：
e.target[e.target.options.selectedIndex].innerText;
Demo
let log=document.getElementById（'log'）；函数句柄更改（e）{let innerText=e.target[e.target.options.selectedIndex].innerText；let value=e.target.value；log.innerHTML=`<table><tr><th>值</th><th>innerText</th></tr><tr><td>$｛value｝</td><td>$｛innerText｝</td></tr></table>`；}<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"><select id=“greet”onchange=“handleChange（event）”><option value=“value_hello”>hello innerText</option><option value=“value_goodbye”>再见innerText</option><option value=“value_seeYou”>再见。。。innerText</option></选择><select id=“other_select_menu”onchange=“handleChange（event）”><option value=“value_paris”>paris innerText</option><option value=“value_ny”>纽约innerText</option></选择><div id=“log”></div>
有两种方法可以使用JavaScript或jQuery完成此操作。
JavaScript：
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
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'
由于代码的可能性、直观性以及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\'s 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输出
id应用于化妆。出于函数形式的目的，名称仍然有效，在HTML5中也是如此，应该仍然使用。最后，请注意在某些地方使用方括号和圆括号。正如前面所解释的，只有（旧版本的）Internet Explorer在所有地方都接受圆形。
Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log（ddlViewBy.value）；console.log（ddlViewBy.selectedOptions[0].text）；<select id=“ddlViewBy”><option value=“1”>快乐</option><option value=“2”>树</option><option value=“3”selected=“selected”>朋友</option></选择>
