Get the selected value of a dropdown list

Question

I have the follwing code. I want to get the value of the selected value of the dropdownlist once the user changes it or to have the default value to be displayed by alert(). I need to use alert() from within the < body > of the html. Is that possible?

<html>
 <head>
 <title>Title</title>
 <script type="text/javascript" src="phonegap-1.4.1.js">
</script> <script type="text/javascript" src="JS/Util.js"></script>
 <script type="text/javascript" src="JS/Language.js"></script>
 <script type="text/javascript">
   function dropdown(){
  var drp = document.getElementById("numberlist");
 var optn = document.createElement("OPTION");
 optn.text="3";
 optn.value="3";
 drp.add(optn);
 }
    </script>
 </head>
  <body onload="dropdown();"> <div id="main3"></div>  <form><select id = "numberlist"><option>12</option><option>24</option><option>36</option></select>

http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript — Andy Davies, Jun 28 '12 at 12:13
Thank Andy I tried that but when its used, it gives the default value of the dropdown list before selecting the required one/ — harsh, Jun 28 '12 at 12:14

David G · Answer 1 · 2012-06-28T12:32:48.473

3

Use the code:

selectElement.options[ selectElement.options.selectedIndex ];

to find the index that is selected.

So where you say var drp = document.getElementById("numberlist"); you can now find the value of the index by doing:

var value = drp.options[ drp.options.selectedIndex ].value;

Add the code into an onchange event so that whenever you change the selectedIndex of the element, you will be able to obtain it's value:

Here is a DEMO

edited Jun 28 '12 at 12:32

answered Jun 28 '12 at 12:15

David G

94,763
41
167
253

David can you please tell me where I should use this. – harsh Jun 28 '12 at 12:17
Thanks David, I finally used user1484563's answer. +1 for your answer. :) – harsh Jun 29 '12 at 04:42

score 2 · Answer 2 · answered Jun 28 '12 at 12:18

2

add this function within script tag.

function pickvalue(id){
   var drp = document.getElementById(id);
   alert(drp.value);
}

and add function call like this.

<select id = "numberlist" onchange="pickvalue(this.id)">

answered Jun 28 '12 at 12:18

Muhammad Saifuddin

1,284
11
29

Thanks Saifuddin.. I used user1484563's answer. :) – harsh Jun 29 '12 at 04:43
Thanks Saifuddin. I've went straight to jQuery and am now tasked with editing some legacy scripts at work and need to learn plain jscript. This was very helpful to get me rolling for an on change :) – kyle Nov 08 '13 at 23:26

score 2 · Accepted Answer · answered Jun 28 '12 at 12:50

Try this Following...Mark it as answer if it helps you

<html>  
<head>  
<title>Title</title>  
<script type="text/javascript" src="phonegap-1.4.1.js"> </script> <script         type="text/javascript" src="JS/Util.js"></script>  
<script type="text/javascript" src="JS/Language.js"></script> 
<script type="text/javascript">    
function dropdown()
{   
    var drp = document.getElementById("numberlist");  
    var optn = document.createElement("OPTION");  
    optn.text="3";  
    optn.value="3";  
    drp.add(optn);  
}  

</script>  
</head>   
<body onload="dropdown();"> 
<div id="main3">
</div>  
<form>
<select id="numberlist" onchange="show()">
<option>12</option>
<option>24</option>
<option>36</option>
</select> 
<script type="text/javascript">
    function show() {
        var e = document.getElementById('numberlist');
        var txt = e.options[e.selectedIndex].text;
        alert(txt);


    }   
</script>
</form>
</body>
</html>

score 1 · Answer 4 · answered Jun 28 '12 at 12:16

1

Here is a JQuery method:

 $value = $("#numberlist option:selected").text();
 alert($value);

answered Jun 28 '12 at 12:16

Danny

468
2
7

Thanks Danny.. I used user1484563's answer. :) – harsh Jun 29 '12 at 04:44

Get the selected value of a dropdown list

4 Answers4