无法使用JavaScript在下拉框中获取选定的值
[英]Cannot fetch the selected value in a drop down box using JavaScript
问题描述
In this thread , it is described how you can fetch the selected value from a drop down box using JavaScript. 
在该线程中 ，描述了如何使用JavaScript从下拉框中获取选定的值。 I've been trying to follow the instructions in that thread, but haven't been able to get it working. 我一直在尝试按照该线程中的说明进行操作，但未能使其正常运行。
Here's a minimal (non-working) example of what I'm trying to do. 这是我要执行的操作的最小示例（无效）。 The code should print the value of the second option from the drop down box, but instead I get the following error in the Chrome's JavaScript console Uncaught TypeError: Cannot read property 'options' of null on row 11 (that is, when I define my second variable). 该代码应从下拉框中打印第二个选项的值，但是相反，我在Chrome的JavaScript控制台中收到以下错误Uncaught TypeError: Cannot read property 'options' of null第11行（即当我定义了第二个变量）。
<html>
<body>
<select name='a_drop_down_box'>
<option value='1'>One</option>
<option value='2' selected='selected'>Two</option>
<option value='3'>Three</option>
</select>
<p id='message'></p>
<script type="text/javascript">
var test = document.getElementById("a_drop_down_box");
var testValue = test.options[test.selectedIndex].value;
document.getElementById('message').innerHTML=testValue;
</script>
</body>
</html>
4 个解决方案
解决方案1
3 已采纳 2012-08-07 11:18:09
document.getElementById("a_drop_down_box");
Did you notice that you haven't defined an id for the select item? 您是否注意到尚未为选择项定义ID？
The name attribute is used to identify the form element for requests send using the form. name属性用于为使用表单发送的请求标识表单元素。 You should use an id to retrieve it from the dom. 您应该使用ID从dom中检索它。
Alternatively if your select resides inside a form, you could use this: 或者，如果您的选择位于表单内，则可以使用以下方法：
document.getElementById("myForm").elements["a_drop_down_box"];
解决方案2
1 2012-08-07 11:17:51
You forgot to give your <select> an id attribute. 您忘记为<select>一个id属性。
<html>
<body>
<select id='a_drop_down_box' name='a_drop_down_box'>
<option value='1'>One</option>
<option value='2' selected='selected'>Two</option>
<option value='3'>Three</option>
</select>
<p id='message'></p>
<script type="text/javascript">
var test = document.getElementById("a_drop_down_box");
var testValue = test.options[test.selectedIndex].value;
document.getElementById('message').innerHTML=testValue;
</script>
</body>
</html>
解决方案3
1 2012-08-07 11:17:52
The dropdown's name attribute is "a_drop_down_box" - you're calling it as thought this was its id . 下拉列表的name属性是“ a_drop_down_box”-您以它的id name它。
Any time you get an '...of undefined' error it means the object (or element, in your case) you think you're working on has not been found. 每当您收到“ ...未定义”错误时，就意味着找不到您认为正在使用的对象（或元素，在您的情况下）。 So always confirm this before wondering why errors are happening. 因此，在怀疑为什么会发生错误之前，请务必进行确认。 In your case, you could have done: 就您而言，您可以做到：
alert(test); //undefined - no element found with that ID
解决方案4
1 2012-08-07 11:31:34
You forgot to add id to your select tag 您忘记在选择标签中添加ID
var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].value;
Will return 2. If you want Two , then do this: 将返回2。如果您想要Two ，则执行以下操作：
var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].text;
Here is a simple example http://jsfiddle.net/VCerV/3/ 这是一个简单的示例http://jsfiddle.net/VCerV/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.