Get selected text from a drop-down list select box using jQuery

Question

How can I get the selected text (not the selected value) from a drop-down list in jQuery?

Answer 1

Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:

1 2	$( "#myselect" ).val(); // => 1

The second is the text value of the select. For example, using the following select box:

1 2 3 4 5 6 7

<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:

1 2	$( "#myselect option:selected" ).text(); // => "Mr"