如何使用JavaScript从下拉列表中获取所选值？
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
下面的代码展示了使用JavaScript从输入/选择字段获取/放置值的各种示例。
源链接
使用Javascript和jQuery演示
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
以下脚本获取所选选项的值并将其放入文本框1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
下面的脚本从文本框2中获取一个值，并用其值发出警报
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
以下脚本正在从函数调用函数
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>
其他回答
有一个解决方法，使用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必须获得其他值，因此它必须是可能的。
如果您不想看到任何插件，请尽可能缩小它？或者在上面的链接中找到一个根本不需要表单的插件，我只是没有花时间。
var strUser = e.options[e.selectedIndex].value;
这是正确的，应该为您提供值。是你想要的文本吗？
var strUser = e.options[e.selectedIndex].text;
所以你对术语很清楚：
<select>
<option value="hello">Hello World</option>
</select>
此选项具有：
索引=0值=hello文本=你好世界
您应该使用querySelector来实现这一点。这也规范了从表单元素获取值的方式。
var dropDownValue=document.querySelector（'#ddlViewBy'）.value；
小提琴：https://jsfiddle.net/3t80pubr/
由于代码的可能性、直观性以及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在所有地方都接受圆形。
使用jQuery：
$('select').val();
