Tag Archives: dropdown list

jQuery: Dropdown Lists: Get the Text of the Currently Selected Option instead of the Value Programming 11 NOV 2011

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.

Couple Choosing Product From Shelf While Shopping In Supermarket

jquery logo

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

How to Set the Selected Index of a Dropdown using jQuery CodeUnit 20 JUN 2011

There are a number of ways to set the selected index of a dropdown list when it comes to jQuery, though unfortunately one of them only works about half the time, basically whenever the guys behind the library remember to fix a particular bug in the system for that particular release.

However, these two methods below all work flawlessly, and should give you all the tools you need (note the first two examples are actually the same method):

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem").get(0).selectedIndex = 0;

The method you would expect to see but which I have omitted because it is a recurring bug that gets fixed in most but not all releases is of course the manipulation of the selectedIndex attribute through the attr() call. But seeing as the DOM method works well, there is no reason to even bother listing this one anymore!

Nifty.