Getting all options in a select element

Question

I have a select element where a user can add and remove options. When the user is done they will then click save but I cannot figure out how to then get all the options from the select. I have found JQuery to get all the selected but I just need all of them. I tried this:

var str = "";    
$("#wordList").each(function () {    
    str += $(this).text() + ",";    
});    
alert(str);

But it just concatenates all the option to one long string that ends in a comma.

Solution 1

That code does exactly what it says on the box. Normally I would expect you would have used $("#wordList option") to get the options. I am guessing that if the options are "This", "That" and "The other" then you got ThisThatThe Other,, which is what that code will do (that is all the text inside the #wordList element, which essentially includes all the options inside that element. The array you are performing .each() on has a single element: "ThisThatThe Other", you iterate over it once and add a comma).

You want to concatenate the text of each of the OPTIONS in #wordList (I think), so try

var str = "";    
$("#wordList option").each(function () {    
    str += $(this).text() + ",";    
});    
alert(str);

to give you a string of all the words (like This,That,The Other,) If you want an array, instead do this:

var arr = [];    
$("#wordList option").each(function () {    
    arr.push($(this).text());    
});    
alert(arr.join(", "));

Solution 2

Just map the options to an array of their values:

var options = $("select option").map(function () {
    return $(this).text();
}).get();

At this point you have an array. If you want it to be a CSV, use the join method:

options.join(",");

The end result is either an array ["One", "Two"] or a string "one,two".

Solution 3

"it doesn't matter if I get it in an array or csv, I just need to get all the option elements from the select element"

$('#your_select_id').prop('options') will return you a collection of all the options.

You can then do whatever you want with it... here's an example where we collect all option values in an array.

var values = [];

$.each($('#your_select_id').prop('options'), function () {
    values.push(this.value);   
});

Comments

[Beetroot-Beetroot]

I was just about to post the same solution but with alert(options.join(', '));. (And yes, it's very easy to forget the get()).

[plalx]

return $(this).val(); is jQuery abuse and is very unefficient... return this.value ?

[Sampson]

@plalx It's not jQuery abuse; jQuery is meant to normalize those properties so you don't deal directly with the native DOM itself. This is meant to save you from unexpected issues in other environments. This is precisely why .val() exists in the first place ;)

[user390480]

Thank you, Chris. I just needed to put the word 'option' after #wordList. This works perfectly. Thanks!

[Chris O'Kelly]

No Problem. I hope you also understand why this works and the original didn't for the future. If that's not well enough explained I am happy to reword.

[plalx]

@JonathanSampson, did you ever encounter a JS engine where Option objects dont have a value property? You can still trust the language at some point, option.value is not posing any cross-browser issue.

[Beetroot-Beetroot]

Guys, the OP is after .text() not .val() but apart from that, this is the best answer by far. And yes, you can extract text with POJS if you really want to.

[Sampson]

@Beetroot-Beetroot I went with .val since it will return the text, unless a value has been provided. If I went with .text, it would ignore any actual values set.

[Sampson]

@plalx jQuery abstracts these APIs for a reason; use the abstraction. Only in rare circumstances would I jump in and out of the jQuery abstraction to perform certain tasks.

[Beetroot-Beetroot]

That's interesting Jonathan - certainly something for me to remember. Sounds like it might be a good approach, though we don't know, maybe text and val are both set and OP specifically wants the text.

[Sampson]

@Beetroot-Beetroot That would be a dangerously poor design. Without JavaScript the form would submit the values. And with JavaScript, the values are irrelevant. I felt safer assuming the developer is doing things the right way. Probably worth a note though (answer updated).

[Beetroot-Beetroot]

Jonathan, I don't quite understand. It's common for options to be constructed as eg <option value="123">Berlin</option>, where the value is a UID and the text is human-readable. Or are we talking at cross-purposes? :(

[plalx]

@JonathanSampson, there are many things that can be done safely with native API's and always delegating to jQuery for these will hurt your code performances without providing any advantages.

[Sampson]

@Beetroot-Beetroot You're right; in that case you would want to submit the 123 value. If the 123 wasn't what you wanted to submit, you would either have Berlin as both the value and text, or only the text. In either case, the important bit will be picked up by val for submission. You make an interesting point though; maybe the OP doesn't want this for submission, but for displaying elsewhere on the page...

[Beetroot-Beetroot]

Yes quite, we don't really know the purpose of all this.