如何使用JavaScript从下拉列表中获取所选值？
<表单><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/
其他回答
给定如下所示的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>
纯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").val(); // The value of the selected option
角度JS：(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'
}];
有两种方法可以使用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'
onChange回调中的event.target.value为我提供了诀窍。
由于代码的可能性、直观性以及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在所有地方都接受圆形。
