如何使用JavaScript从下拉列表中获取所选值？
我尝试了下面的方法，但它们都返回选定的索引而不是值：
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
var value = document.getElementById("ddlViewBy").value;
如果你有一个如下所示的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 strUser = e.options[e.selectedIndex].value;
会使strUser成为2。如果你真正想要的是test2，那么这样做：
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;
这将使strUser成为test2
由于可能性，代码的直观性以及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,output。
id应该用于化妆目的。出于功能形式的目的，name仍然有效，也在HTML5中，仍然应该使用。最后，请注意在某些地方使用方括号与圆括号。如前所述，只有（旧版本）IE会在所有地方接受圆形。
使用jQuery：
$('select').val();
有两种方法可以使用JavaScript或JQuery完成此操作。
JavaScript的：
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
要么
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'
你可以使用querySelector。
EG
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;
运行如何工作的示例：
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3" selected="selected">test3</option>
</select>注意：值不会随着下拉列表的更改而更改，如果您需要该功能，则需要实现onClick更改。
2015年，在Firefox，以下也有效。
e.options.selectedIndex
为了得到上述答案，这就是我作为一个单行的方式。这是为了获取所选选项的实际文本。已经有很好的例子来获取索引号。 （对于文本，我只是想以这种方式显示）
var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
在极少数情况下，您可能需要使用括号，但这种情况非常罕见。
var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
我怀疑这个过程比两行版本更快。我只想尽可能地整合我的代码。
如果有人知道如何在一行中完成这一操作而不必两次获得该元素，我很乐意为您发表评论并告诉我如何操作。我还没弄清楚......
另一个解决方案是
document.getElementById('elementId').selectedOptions[0].value
这是一个JavaScript代码行：
var x = document.form1.list.value;
假设名为list name="list"的下拉菜单包含在名称属性为name="form1"的表单中。
我有点不同的看法，如何实现这一目标。我通常使用以下方法执行此操作:(就我所知，它更简单，适用于所有浏览器。）
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>
普通的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 :selected").val(); // The value of the selected option
AngularJS（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'
}];
我能看到这个代码不起作用的唯一原因是如果你使用的是IE7-，并且忘了为你的<option>-tags指定value属性...其他每个浏览器都应该将open-close标签中的内容转换为选项值。
只是做：document.getElementById('idselect').options.selectedIndex
然后你我会得到选择索引值，从0开始。
这是在onchange函数中执行此操作的简单方法：
event.target.options[event.target.selectedIndex].dataset.name
var strUser = e.options[e.selectedIndex].value;
这是正确的，应该给你价值。这是你要追求的文字吗？
var strUser = e.options[e.selectedIndex].text;
所以你对术语很清楚：
<select>
<option value="hello">Hello World</option>
</select>
此选项包括：
以下代码展示了与使用JavaScript从输入/选择字段获取/放置值相关的各种示例。
工作Demo
<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>
var selectedValue = document.getElementById("ddlViewBy").value;
如果您遇到纯粹为IE编写的代码，您可能会看到：
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
在Firefox等人中运行上面的内容会给你一个'不是函数'的错误，因为IE允许你使用（）而不是[]来逃避：
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
正确的方法是使用方括号。
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
只是用
$('#SelectBoxId option:selected').text();用于获取列出的文本$('#SelectBoxId').val();初学者可能希望使用NAME属性而不是ID属性来访问select中的值。我们知道所有表单元素都需要名称，甚至在它们获得ID之前。
所以，我正在为新开发人员添加getElementByName()解决方案。
NB。表单元素的名称必须是唯一的，表单一旦发布就可以使用，但DOM可以允许名称由多个元素共享。因此，如果可以，请考虑向表单添加ID，或者明确表单元素名称my_nth_select_named_x和my_nth_text_input_named_y。
使用getElementByName的示例：
var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;