separate each value with comma from multiple select

Question

I have a <select multiple='multiple' and I need to show the selected value in a div or some other part of the page.

I did this but the string is all smushed together. How can I separate each value with a comma?

I made a live example with what I have so far.

Or if you prefer, here is the code:

html:

<select multiple='multiple' id="selMulti">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
     <option value="4">Option 4</option>    
</select>
<input type="button" id="go" value="Go!" />
<div style="margin-top: 10px;" id="result"></div>

js:

$("#go").click(function(){
     var selMulti = $("#selMulti option:selected").text();
     $("#result").text(selMulti);
});

If you select the option 1 and 2, the result will be:

Option 1Option 2

What I need is:

Option 1, Option 2

Thanks

Thank you for having already asked this so I didn't have to ask and wait for an answer. — lathomas64, Dec 31 '13 at 17:15

score 38 · Accepted Answer · answered Oct 27 '11 at 11:12

38

You need to map the elements to an array and then join them:

$("#go").click(function(){
     var selMulti = $.map($("#selMulti option:selected"), function (el, i) {
         return $(el).text();
     });
     $("#result").text(selMulti.join(", "));
});

Working demo: http://jsfiddle.net/AcfUz/

http://api.jquery.com/jQuery.map/

answered Oct 27 '11 at 11:12

Andy E

338,112
86
474
445

3

Pretty freakin great soloution! :) – Marco Johannesen Oct 27 '11 at 11:16

Kamil Lach · Answer 2 · 2011-10-27T11:27:26.963

4

$("#go").click(function(){
     var textToAppend = "";
     var selMulti = $("#selMulti option:selected").each(function(){
           textToAppend += (textToAppend == "") ? "" : ",";
           textToAppend += $(this).text();           
     });
     $("#result").html(textToAppend);
});

edited Oct 27 '11 at 11:27

answered Oct 27 '11 at 11:12

Kamil Lach

4,519
2
19
20

Need to add ` + ','` in the append call – JohnP Oct 27 '11 at 11:16
The OP specifically asked for a comma-separated result. – Andy E Oct 27 '11 at 11:16
Now your solution will append a comma to the end of the string, e.g. `Option 2,Option 3,` – Andy E Oct 27 '11 at 11:22
Now should work as expeced, but its's more complicated then Andy E solution. – Kamil Lach Oct 27 '11 at 11:26

score 2 · Answer 3 · answered Sep 21 '17 at 04:23

2

One line style:

 $("#selMulti option:selected").map(function(){return this.text}).get().join(', ');

Output:

"Option 1, Option 2"

answered Sep 21 '17 at 04:23

Luis Hernandez

453
5
8

separate each value with comma from multiple select

3 Answers3

Linked