jQuery Tip - Getting Select List Values: jQuery, Tutorial

jQuery Tip - Getting Select List Values

Tags: jQuery, Tutorial | Written on 22/7/08

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:
  1. $('#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:
  1. $('#selectList :selected').text()

View Demo:

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:
  1. var foo = [];
  2. $('#multiple :selected').each(function(i, selected){
  3.     foo[i] = $(selected).text();
  4. });

Comments

#1. Mike Branski on 22/7/08
This is a commonly asked question on jQuery Help, too, and very useful to know.
#2. Marc Grabanski on 22/7/08
I've had to do this plenty of times, yet each time I found myself googling it. That is how I know it is time to take a moment and document it on my website to potentially help others.
#3. HoyaSaxa93 on 23/7/08
Would this also work for select lists / listboxes that are multi-select? Would it return a delimited list or an array?
#4. rd on 23/7/08
If you use text() on multiple elements it will return one concatenated string such as "OneTwoThree"

If you want a real array, I'd use this:

$.map($('#foo :selected'), function(e) { return $(e).text(); })

There you'll have ["One", "Two", "Three"]
#5. Marc Grabanski on 23/7/08
HoyaSaxa93: val() will work just fine to get an array of values, but to get an array of text is a little different. I added code to the bottom of the article that describes how to get the selected options text to an array.

rd: I don't understand $.map enough to comment on it, I will have to look into that!
#6. WebAPI.org on 30/7/08
The problem is when you try to select a specific option from the list:

<select id="s1">
<option value="">1</option>
<option value="1">2</option>
<option value="4">3</option>
<option value="5">4</option>
</select>
<script>
$("#s1").val("4");
</script>

It doesn't work but

$("#s1").val("1");

works just fine. Strange behaviour.
#7. Marc Grabanski on 30/7/08
WebAPI: The results of my testing show $("#s1").val("4"); works to select the fourth option. $("#s1").val("1"); or $("#s1").val("2"); will select the second option because you don't have a value set for the first option. To select the first option use, $("#s1").val("0");.
#8. WebAPI.org on 30/7/08
Sometimes it selects it by value, sometimes by text, or by selectedIndex. My point is that is not consistent. I expect to always select the option based on its 'value' attribute, when value is provided with val(). Otherwise is just confusing and not usable.
#9. Marc Grabanski on 30/7/08
An alternate way to do what you are asking would be: $('#s1')[0].selectedIndex = 0;. I personally have not used val to set the value of a select list before. I just tested it above based on your comment.
#10. Duranguenze 2 weeks, 4 days ago
How i delete one option in the select using jquery, do you know i not have idea.
#11. Marc Grabanski 2 weeks, 4 days ago
Use this code, replacing the id and value accordingly... $("#selectList option[@value=2]").remove();
This would grab select list with id, "selectList" and find an option within it that has value, "2" - then remove it.
#12. full oyun indir 2 weeks, 3 days ago
thanx for information

Leave a Comment