jQuery: Dropdown Lists: Get the Text of the Currently Selected Option instead of the Value

If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript!

Dropdown select lists are a great tool in your HTML form arsenal, consisting of outer <select> tags which contain any number of <option> tags that make up the list options. Of course we all know that the value of an option doesn’t have to match what is displayed for that option, which leads us straight into today’s tip to retrieve the currently selected text string instead of the value.

The val() method in jQuery would return us the option’s value, meaning that in order to grab the text of an option, we would have to turn to the jQuery text() method.

Knowing this, the next part of this puzzle is to located the option which happens to be currently selected – and for that jQuery provides the very useful :selected selector.

The :selected selector selects all elements that are currently selected in a dropdown list, working on option tags. This means that while it will work on select boxes, it won’t function on checkboxes or radio buttons as those inputs use :checked.

So in practice, to get the text string for the currently selected option in a select dropdown list looks like this:

alert($('#mylist :selected').text());

Simple.

Updated: Another example lifted off of stackoverflow:

<select id="myselect">
   <option selected="selected">All</option>
   <option value="1">One</option>
   <option value="2">Two</option>
</select>

console.log($('#myselect').val());

// all option's value
$('#myselect').find('option').each(function(){
    console.log($(this).text());
    console.log($(this).val());
});

// change event
$('#myselect').change(function(){
    console.log($(this).find(':selected').text());
    console.log($(this).find(':selected').val());
});

And now you know.

Related Link: http://api.jquery.com/selected-selector/