使用JavaScript在下拉列表中获取选定的值？
如何从下拉列表中使用JavaScript获取选定的值？
我尝试了下面的方法，但他们都返回所选的索引，而不是值：
var as = document.form1.ddlViewBy.value; var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].value; //This is one of the simplest form by (Narendra Kottamidde) : 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
普通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
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' }];
var strUser = e.options[e.selectedIndex].value;
这是正确的，应该给你的价值。 这是你之后的文字吗？
var strUser = e.options[e.selectedIndex].text;
所以你清楚的术语：
<select> <option value="hello">Hello World</option> </select>
这个选项有：
- 索引= 0
- 价值=你好
- Text = Hello World
以下代码展示了与使用JavaScript从input/select字段获取/放置值相关的各种示例。
工作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>
初学者可能想要使用NAME属性而不是ID属性访问select中的值。 我们知道所有的表单元素都需要名字，甚至在他们获得ID之前。
所以，我添加了getElementByName()解决scheme，仅供新开发人员查看。
NB。 表单元素的名称需要是唯一的，以便表单在发布后可用，但DOM可以允许多个元素共享一个名称。 出于这个原因，如果可以的话，考虑将表单添加到表单中，或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y来显式地my_nth_text_input_named_y 。
使用getElementByName示例：
var e = document.getElementByName("my_select_with_name_ddlViewBy"); var strUser = e.options[e.selectedIndex].value;
只是使用
-
$('#SelectBoxId option:selected').text();获取列出的文本 -
$('#SelectBoxId').val();获取选定的索引值
之前的答案仍然有待改进，因为可能性，代码的直观性以及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应该用于化妆目的。 为了function表单的目的， name仍然有效，同样在HTML5中，仍然应该使用。 最后，在某些地方介意使用正方形与圆括号。 如前所述，只有（旧版本的）IE才能接受所有地方的圆形。
请参阅使用JavaScript或jQueryselect下拉元素的文章。 他们已经用很多方式用JavaScript和jQuery解释了它。
使用jQuery：
$('select').val();
在2015年，在Firefox中 ，以下也是有效的。
即 选项 .selectedIndex
这是一个JavaScript代码行：
var x = document.form1.list.value;
假定名为list name="list"的下拉菜单包含在name属性name="form1"的表单中。
我可以看到，这个代码不工作的唯一原因是，如果你使用的是IE7-，并忘了为你的<option> -tags指定value属性…每个其他的浏览器都应该把open-close标签里面的内容转换成选项值。
与上面的答案一起，这就是我作为一个单行的方式。 这是为了获取所选选项的实际文本。 已经有很好的例子获得索引号了。 （而对于正文，我只是想用这种方式performance出来）
var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
在一些罕见的情况下，你可能需要使用括号，但这将是非常罕见的。
var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
我怀疑这个过程比两行版本更快。 我只是想尽可能地整理我的代码。
如果有人知道如何做到这一点，而不必两次获得元素，我很乐意为你评论和告诉我如何。 我还没有弄清楚
运行如何运行的例子：
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>
这是一个简单的方法来做一个onchange函数：
event.target.options[event.target.selectedIndex].dataset.name
