Getting the selected text value in a drop-down list using JQuery

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

<option value="1">Administrator</option>

<option value="2">Member</option>

<option value="3">Guest</option>

<option value="4">Traveller</option>

</select>

Which looks like:

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