Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

Sometimes a need arises to get the text of the selected option in a drop-down list. Using some jQuery selectors this is possible, but first lets see what doesn't work.

Lets say I have a drop-down list defined like this:
<select class="form-control" id="groupId">
<option value="1">Administrator</option>
<option value="2">Member</option>
<option value="3">Guest</option>
<option value="4">Traveller</option>

Which looks like:

If I do a naive thing such as...

...the output is a very confusing jumble of all your option text values...

Instead you have to use the :selected selector on the drop-down list option value like so...
$('select#groupId option:selected').text()

This produces the correct output that is a single text value for the currently selection option.


Did you like this post or found it useful? Considering supporting this Blog to keep its web servers running, any amount helps! Thanks!
Have comments or feedback on what I wrote? Please share them below!
comments powered by Disqus
Other posts you may like...