Cannot fetch the selected value in a drop down box using JavaScript
Question
In this thread , it is described how you can fetch the selected value from a drop down box using 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).
<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 answers
solution1
3 ACCPTED 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?
The name attribute is used to identify the form element for requests send using the form. You should use an id to retrieve it from the dom.
Alternatively if your select resides inside a form, you could use this:
document.getElementById("myForm").elements["a_drop_down_box"];
solution2
1 2012-08-07 11:17:51
You forgot to give your <select> an id attribute.
<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>
solution3
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 .
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
solution4
1 2012-08-07 11:31:34
You forgot to add id to your select tag
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:
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.