54

I am trying to grab all selected items in the following select multiple and separate them by a comma. The code is below:

<select id="ps-type" name="ps-type" multiple="multiple" size="5">
    <option>Residential - Wall Insulation</option>
    <option>Residential - Attic /Crawl Space Insulation</option>
    <option>Residential - Foundation Insulation</option>
    <option>Residential - Exterior Roof System</option>
    <option>Commercial - Wall Insulation</option>
    <option>Commercial - Air Barrier System (Walltite)</option>
    <option>Commercial - Roof System</option>
</select>

The result I am looking for is the following:

Residential - Wall Insulation, Commercial - Wall Insulation, ...

9 Answers 9

93

You can use the :selected selector, and the inline $.map() function as part of your chain.

$("option:selected").map(function(){ return this.value }).get().join(", ");
0
24

Add the values to an array and use join to create the string:

var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');
3
  • 1
    You need the text() and not the val() Feb 18, 2010 at 16:31
  • 1
    val() will actually still get the text from an option if there is no value attribute.
    – Mark Bell
    Feb 18, 2010 at 16:33
  • 1
    @kgiannakakis: Unless there is a value specified, the value is the text. If there is a value specified, you would most likely want the value instead.
    – Guffa
    Feb 18, 2010 at 16:35
12

On a multiple select element, the val command of the select element will return an array of the selected options values. If no values are present, the text of the element is used:

var output = $("#ps-type").val().join(', ');

update: However, when there are no selected options val() returns null not an empty array. One way to get around this:

var output = ($("#ps-type").val() || []).join(', '); 

You can play around with it in this demo I put together.

From the docs:

In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option.

1
  • As of jQuery 3.0, .val() does in fact return an empty array when no options are selected.
    – Wick
    May 17, 2019 at 14:55
3

Something like this should do the trick:

var result = "";
$('#ps-type option:selected').each(function(i, item){ 
   result += $(this).val() + ", ";
});
2
var list = "";
$('#ps-type option:selected').each(function(){
  list += this.value + ", ";
});
return list.substr(0, list.length - 2);
0
1

Here you go:

var result = new Array();

$("#ps-type option:selected").each(function() {
    result.push($(this).val());
});

var output = result.join(", ");
1

$(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="colorselector" multiple="multiple" size="2">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

1
  • It would be better if you add some comments why you wrote/edited that code so others could understand. Jul 16, 2016 at 7:49
1

The most simple solution

You could simply use just .val() like :

console.log( $('#ps-type').val() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="ps-type" name="ps-type" multiple="multiple" size="5">
  <option selected>Residential - Wall Insulation</option>
  <option>Residential - Attic /Crawl Space Insulation</option>
  <option>Residential - Foundation Insulation</option>
  <option>Residential - Exterior Roof System</option>
  <option selected>Commercial - Wall Insulation</option>
  <option>Commercial - Air Barrier System (Walltite)</option>
  <option selected>Commercial - Roof System</option>
</select>

0

Try this:

    var List = new Array();
    $('#ps-type option:selected').each(function () {
       if ($(this).length) {
              var sel= {
                  name: $this.text()
              }
       }
       List.push(sel);
    });
    var result = List.join(', ');
1
  • Try this answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please improve your answer. Jan 2, 2019 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.