web-dev-qa-db-de.com

JQuery - Multiple Select-Optionen

Ich versuche, alle ausgewählten Elemente in den folgenden Abschnitten auszuwählen und durch ein Komma zu trennen. Der Code ist unten:

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

Das Ergebnis, nach dem ich suche, ist folgendes:

Wohn - Wanddämmung, Gewerbe - Wanddämmung, ...

jqueryselect
42
Brad Birdsall

Sie können den Selektor :selected und die Funktion $.map() inline als Teil Ihrer Kette verwenden.

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

Fügen Sie die Werte einem Array hinzu und verwenden Sie join, um die Zeichenfolge zu erstellen:

var items = [];
$('#ps-type option:selected').each(function(){ items.Push($(this).val()); });
var result = items.join(', ');
22
Guffa

Bei einem Multiple-Select-Element gibt der Befehl val des Elements select ein Array mit den ausgewählten Optionswerten zurück. Wenn keine Werte vorhanden sind, wird der Text des Elements verwendet:

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

update: Wenn jedoch keine Optionen ausgewählt sind, gibt val()null kein leeres Array zurück. Eine Möglichkeit, dies zu umgehen:

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

Sie können damit in diese Demo, die ich zusammengestellt habe herumspielen.

Von die Dokumente :

Bei <select multiple="multiple">-Elementen gibt die .val()-Methode ein Array zurück, das die ausgewählten Optionen enthält.

9
Doug Neiner

So etwas sollte den Trick tun:

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

Bitte schön:

var result = new Array();

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

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

Die einfachste Lösung

Sie können einfach .val() wie folgt verwenden:

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
Zakaria Acharki

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

0
Vilgar Mkrtchyan

Versuche dies:

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