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

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
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:
 HTML
<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>
</select>


Which looks like:
selectopt.png


If I do a naive thing such as...
 JavaScript
console.log(
$('select#groupId').text()
);


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




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


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

-i

Skip down to comments...
A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. If you spot something out of place, please do let me know.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
 
comments powered by Disqus
Other posts you may like...