jQuery Tip - Getting Select List Values: jQuery, Tutorial

Chris Hartjes asked me a simple question today, but it is worth noting because I have asked the same before, "How do you get the current value from a select list?"

To get the current value is very simple using val().

JavaScript:

$('#selectList').val();

But sometimes you may need to get the selected option's text. This is not as straight forward. First, we get the selected option with :selected selector. Then once we have the option, we can get the text with the function, text().

JavaScript:

$('#selectList :selected').text()

View Demo:

First Option Second Option Third Option Get Value Get Text

Note on July 23 @9:14AM: HoyaSaxa93 wrote in to ask how to get values from select multiples. I will create the demo and code below. This would be how to set a select multiple to an array called, "foo".

JavaScript:

var foo = [];
$('#multiple :selected').each(function(i, selected){
    foo[i] = $(selected).text();
});