Get selected value in dropdown list using JavaScript

Question

How do I get the selected value from a dropdown list using JavaScript?

I tried the methods below, but they all return the selected index instead of the value:

var e = document.getElementById("ddlViewBy"); function show(){   var as = document.forms[0].ddlViewBy.value;   var strUser = e.options[e.selectedIndex].value;   console.log(as, strUser); } e.onchange=show; show();

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

Answer 1

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