如何使用JavaScript从下拉列表中获取所选值？
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
以下是JavaScript代码行：
var x = document.form1.list.value;
假设下拉菜单名为list name=“list”，并包含在name属性name=“form1”的表单中。
其他回答
给定如下所示的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>
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在所有地方都接受圆形。
var strUser = e.options[e.selectedIndex].value;
这是正确的，应该为您提供值。是你想要的文本吗？
var strUser = e.options[e.selectedIndex].text;
所以你对术语很清楚：
<select>
<option value="hello">Hello World</option>
</select>
此选项具有：
索引=0值=hello文本=你好世界
初学者可能希望使用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;
