Get the selected value in a dropdown using jQuery.

Question

My HTML is below. I need to get the selected value (Scheduled) using the <select> tag. How can this be done using jQuery?

<select id="availability" style="display: none;">   <option value="Available">Available</option>   <option selected="selected" value="Scheduled">Scheduled</option>   <option value="Unavailable">Unavailable</option> </select> 

I did a jQuery("#availability") to get the select tag, but I do not know how to get the selected options' value.

Answer 1

Try:

jQuery("#availability option:selected").val(); 

Or to get the text of the option, use text():

jQuery("#availability option:selected").text(); 

More Info:

• http://api.jquery.com/val/
• http://api.jquery.com/text/

Answer 2

The above solutions didn't work for me. Here is what I finally came up with:

$( "#ddl" ).find( "option:selected" ).text();           // Text $( "#ddl" ).find( "option:selected" ).prop("value");    // Value