JQuery - Multiple Select Options

Question

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, ...

Sampson · Accepted Answer · 2010-02-18 16:36:27Z

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(", ");

answered Feb 18, 2010 at 16:36

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2010-02-18 16:39:22Z

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(', ');

edited Feb 18, 2010 at 16:39

answered Feb 18, 2010 at 16:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

3 Comments

kgiannakakis Over a year ago

You need the text() and not the val()

Mark Bell Over a year ago

val() will actually still get the text from an option if there is no value attribute.

Guffa Over a year ago

@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.

Doug Neiner · Accepted Answer · 2010-02-18 17:02:19Z

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.

edited Feb 18, 2010 at 17:02

answered Feb 18, 2010 at 16:48

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

1 Comment

Wick Over a year ago

As of jQuery 3.0, .val() does in fact return an empty array when no options are selected.

Raul Agrait · Accepted Answer · 2010-02-18 16:32:13Z

3

Something like this should do the trick:

var result = "";
$('#ps-type option:selected').each(function(i, item){ 
   result += $(this).val() + ", ";
});

edited Feb 18, 2010 at 16:32

answered Feb 18, 2010 at 16:26

Raul Agrait

6,0386 gold badges51 silver badges72 bronze badges

Comments

Russell Giddings · Accepted Answer · 2010-02-18 16:27:53Z

2

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

answered Feb 18, 2010 at 16:27

Russell Giddings

9,0815 gold badges37 silver badges35 bronze badges

Comments

Mark Bell · Accepted Answer · 2010-02-18 16:31:49Z

1

Here you go:

var result = new Array();

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

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

answered Feb 18, 2010 at 16:31

Mark Bell

29.8k26 gold badges121 silver badges150 bronze badges

Comments

Vilgar Mkrtchyan · Accepted Answer · 2016-07-16 07:44:24Z

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>

answered Jul 16, 2016 at 7:44

Vilgar Mkrtchyan

111 silver badge2 bronze badges

1 Comment

Gynteniuxas Over a year ago

It would be better if you add some comments why you wrote/edited that code so others could understand.

Zakaria Acharki · Accepted Answer · 2018-09-17 15:59:19Z

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>

answered Sep 17, 2018 at 15:59

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

Regan · Accepted Answer · 2017-01-28 21:47:04Z

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(', ');

answered Jan 28, 2017 at 21:47

Regan

213 bronze badges

1 Comment

mickmackusa Over a year ago

Try this answers are low value on Stackoverflow because they do very little to educate/empower thousands of future researchers. Please improve your answer.

Collectives™ on Stack Overflow

JQuery - Multiple Select Options

9 Answers 9

Comments

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

The most simple solution

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

The most simple solution

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related