CODEWITHSUNDEEP
jqueryselect
Brad Birdsall
Brad Birdsall

Reputation: 1743

JQuery - Multiple Select Options

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

Upvotes: 54

Views: 83021

Answers (9)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 1

Regan
Regan

Reputation: 21

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

Upvotes: 0

Vilgar Mkrtchyan
Vilgar Mkrtchyan

Reputation: 11

$(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>

Upvotes: 1

Doug Neiner
Doug Neiner

Reputation: 66221

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.

Upvotes: 12

Guffa
Guffa

Reputation: 700770

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

Upvotes: 24

Sampson
Sampson

Reputation: 268462

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

Upvotes: 93

Raul Agrait
Raul Agrait

Reputation: 6018

Something like this should do the trick:

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

Upvotes: 3

Mark Bell
Mark Bell

Reputation: 29785

Here you go:

var result = new Array();

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

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

Upvotes: 1

Russell Giddings
Russell Giddings

Reputation: 9011

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

Upvotes: 2

Related Questions