Get selected value of dropdown(Picklist) using Javascript

Hello Everyone, In this unit, we will learn, how to get selected value of dropdown list with the help of javascript. In many assignments or projects scenario we have to get the value of dropdown list in client side that is little bit tough task for those developers who are getting started with javascript so here is the solution for those developers.

After completing this unit, you’ll able to:

• Get the selected value of dropdown in javascript.

So let’s start,

HTML

 <select id="ddlColor">
  <option value="" selected="selected">-Select-</option>
  <option value="1">Red</option>
  <option value="2">Green</option>
  <option value="3">Blue</option>
 </select>

For Value

 var e = document.getElementById("ddlColor");
 var strColor = e.options[e.selectedIndex].value;

Output will be: 1 or 2 or 3

For Text

 var e = document.getElementById("ddlColor");
 var strColor = e.options[e.selectedIndex].text;

Output will be: Red or Green or Blue

See also:

• Check all Checkboxes in Page via Browser Console

Conclusion:

Hope you like this tutorial, for any query or suggestions please feel free to comment.

Thank you.