CODEWITHSUNDEEP
javascriptjqueryselectlistbox
Amy Neville
Amy Neville

Reputation: 10601

JQuery Select All Option Values From DualListBox

I'm using a dual listbox plugin and am trying to select a list of countries using jQuery:

var countries = $('.selected').find(":selected").map(function(){ return this.value }).get().join(", ");

This is the listbox:

<select class="selected" style="height: 200px; width: 100%;" multiple="" name="countries[]">
<option style="padding:4px 0px 4px 8px;" value="CA" selected="">Canada</option>
<option style="padding:4px 0px 4px 8px;" value="FR" selected="">France</option>
<option style="padding:4px 0px 4px 8px;" value="DE" selected="">Germany</option>
<option style="padding:4px 0px 4px 8px;" value="NL" selected="">Netherlands</option>
<option style="padding:4px 0px 4px 8px;" value="UK" selected="">United Kingdom</option><option style="padding:4px 0px 4px 8px;" value="US" selected="">United States</option>
</select>

I'm trying to get a comma separated list that looks like this:

CA, FR, DE, NL, UK

How do I write this JQuery line correctly?

EDIT 1

var countries = $('.selected').find('option').each(function(){return $(this).val();}).get().join(", ");

This produces:

[object HTMLOptionElement], [object HTMLOptionElement], [object HTMLOptionElement], [object HTMLOptionElement], [object HTMLOptionElement], [object HTMLOptionElement]

So I think I am close?

Upvotes: 3

Views: 1307

Answers (1)

dajo
dajo

Reputation: 187

Try this:

var countries = $('.selected').find('option').map(function() { return this.value }).get().join(", ");

Upvotes: 3

Related Questions