html select - Get selected value in dropdown list using JavaScript

If you have a select element that looks like this:

<select id="ddlViewBy">   <option value="1">test1</option>   <option value="2" selected="selected">test2</option>   <option value="3">test3</option> </select> 

Running this code:

var e = document.getElementById("ddlViewBy"); var strUser = e.value; 

Would make strUser be 2. If what you actually want is test2, then do this:

var e = document.getElementById("ddlViewBy"); var strUser = e.options[e.selectedIndex].text; 

Which would make strUser be test2

Plain 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' }]; 

var strUser = e.options[e.selectedIndex].value; 

This is correct and should give you the value. Is it the text you're after?

var strUser = e.options[e.selectedIndex].text; 

So you're clear on the terminology:

<select>     <option value="hello">Hello World</option> </select> 

This option has:

• Index = 0
• Value = hello
• Text = Hello World

The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.

Source Link

Working Javascript & jQuery 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()"> 

The following script is getting the value of the selected option and putting it in text box 1

<script>     function run() {         document.getElementById("srt").value = document.getElementById("Ultra").value;     } </script> 

The following script is getting a value from a text box 2 and alerting with its value

<script>     function up() {         //if (document.getElementById("srt").value != "") {             var dop = document.getElementById("srt").value;         //}         alert(dop);     } </script> 

The following script is calling a function from a function

<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;