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

| Views: 351
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.


Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...