如何使用JavaScript从下拉列表中获取所选值？
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
初学者可能希望使用NAME属性而不是ID属性访问select中的值。我们知道所有表单元素都需要名称，甚至在获得id之前。
因此，我将添加getElementsByName（）解决方案，让新开发人员也能看到。
没有。表单元素的名称需要是唯一的，以便表单在发布后可以使用，但DOM可以允许多个元素共享名称。因此，如果可以，请考虑将ID添加到表单中，或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式添加ID。
使用getElementsByName的示例：
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;
其他回答
在onchange函数中有一个简单的方法：
event.target.options[event.targets.selectedIndex].dataset-name
我不知道我是不是那个没有正确回答问题的人，但这对我很有用：
例如，在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;
}
这将为您提供每次单击时选择下拉列表中的任何值。
有一个解决方法，使用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必须获得其他值，因此它必须是可能的。
如果您不想看到任何插件，请尽可能缩小它？或者在上面的链接中找到一个根本不需要表单的插件，我只是没有花时间。
<select name="test" id="test" >
<option value="1" full-name="Apple">A</option>
<option value="2" full-name="Ball">B</option>
<option value="3" full-name="Cat" selected>C</option>
</select>
var obj = document.getElementById('test');
obj.options[obj.selectedIndex].value; //3
obj.options[obj.selectedIndex].text; //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true
由于代码的可能性、直观性以及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在所有地方都接受圆形。
