如何使用JavaScript从下拉列表中获取所选值？
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
有一个解决方法，使用EasyUI框架及其所有插件。
您只需要在下拉菜单中添加一些EasyUI对象，该对象可以作为“桥”从输入中读取。
示例：easyui搜索框
左边是下拉列表，右边是easyui搜索框：
...
<input id="ss" class="easyui-searchbox" style="width:300px"
data-options=" searcher:my_function,
prompt:'Enter value',
menu:'#mm'">
<div id="mm" style="width:200px">
<div data-options="name:'1'">test1</div>
<div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
function my_js_function(triggeredByButton = false){
// normal text of the searchbox (what you entered)
var value = $("#ss").searchbox("getValue");
// what you chose from the drop-down menu
var name = $("#ss").searchbox("getName");
...
注意：var名称是“1”或“2”，即“下拉列表的值”，而var值是在easyui搜索框中输入的值，如果您只想知道下拉列表的数值，则不相关。
我检查了EasyUI如何获取这个#mm名称，如果没有EasyUI的帮助，我无法找到如何获取这个名称。getName后面的jQuery：
getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}
注意，此函数的返回不是easyui搜索框的值，而是用作easyui查询框菜单参数的#mm下拉列表的名称。不知何故，EasyUI必须获得其他值，因此它必须是可能的。
如果您不想看到任何插件，请尽可能缩小它？或者在上面的链接中找到一个根本不需要表单的插件，我只是没有花时间。
其他回答
纯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'
}];
我不知道我是不是那个没有正确回答问题的人，但这对我很有用：
例如，在HTML中使用onchange（）事件。
<select id="numberToSelect" onchange="selectNum()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JavaScript
function selectNum() {
var strUser = document.getElementById("numberToSelect").value;
}
这将为您提供每次单击时选择下拉列表中的任何值。
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></选择>
由于代码的可能性、直观性以及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在所有地方都接受圆形。
如果您遇到过纯为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;
正确的方法是使用方括号。
