Wie erhalte ich alle ausgewählten Werte von <select multiple = multiple>?

Es schien seltsam, dass ich diesen nicht schon gefragt finden konnte, aber hier geht es!

Ich habe ein HTML wie folgt:

<select id="select-meal-type" multiple="multiple">
    <option value="1">Breakfast</option>
    <option value="2">Lunch</option>
    <option value="3">Dinner</option>
    <option value="4">Snacks</option>
    <option value="5">Dessert</option>
</select>

Wie erhalte ich alle Werte (ein Array?), Die der Benutzer in Javascript ausgewählt hat?

Wenn der Benutzer beispielsweise Mittagessen und Snacks ausgewählt hat, möchte ich ein Array von {2, 4}.

Dies scheint eine sehr einfache Aufgabe zu sein, aber ich kann es scheinbar nicht tun.

Vielen Dank.

Der übliche Weg:

var values = $('#select-meal-type').val();

Aus den Dokumenten :

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

Sofern in einer Frage nicht nach JQuery gefragt wird, sollte die Frage zuerst in Standard-Javascript beantwortet werden, da viele Benutzer JQuery auf ihren Websites nicht verwenden.

Von RobG Wie erhalte ich alle ausgewählten Werte eines Mehrfachauswahlfelds mit JavaScript? ::

  function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

Tatsächlich habe ich festgestellt, dass der beste, prägnanteste, schnellste und kompatibelste Weg mit reinem JavaScript (vorausgesetzt, Sie müssen IE lte 8 nicht vollständig unterstützen) der folgende ist:

var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) { 
    return v.value; 
});

UPDATE (2017-02-14):

Noch prägnanter mit ES6 / ES2015 (für die Browser, die dies unterstützen):

const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);

Wenn Sie den modernen Weg gehen möchten, können Sie dies tun:

const selectedOpts = [...field.options].filter((x) => x.selected);

Der ...Operator ordnet iterable ( HTMLOptionsCollection) dem Array zu.

Wenn Sie nur an den Werten interessiert sind, können Sie einen map()Aufruf hinzufügen :

const selectedValues = [...field.options]
                     .filter((x) => x.selected)
                     .map((x)=>x.value);

Verwenden Sie zunächst Array.from, um das HTMLCollectionObjekt in ein Array zu konvertieren .

let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
        .map(option => option.value) // make sure you know what '.map' does

// you could also do: selectElement.options

$('#select-meal-type :selected') enthält ein Array aller ausgewählten Elemente.

$('#select-meal-type option:selected').each(function() {
    alert($(this).val());
});

.

Update Oktober 2019

Das Folgende sollte in allen modernen Browsern "unabhängig" ohne Abhängigkeiten oder Transpilation funktionieren.

<!-- display a pop-up with the selected values from the <select> element -->

<script>
 const showSelectedOptions = options => alert(
   [...options].filter(o => o.selected).map(o => o.value)
 )
</script>

<select multiple onchange="showSelectedOptions(this.options)">
  <option value='1'>one</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

Versuche dies:

$('#select-meal-type').change(function(){
    var arr = $(this).val()
});

Demo

$('#select-meal-type').change(function(){
  var arr = $(this).val();
  console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-meal-type" multiple="multiple">
  <option value="1">Breakfast</option>
  <option value="2">Lunch</option>
  <option value="3">Dinner</option>
  <option value="4">Snacks</option>
  <option value="5">Dessert</option>
</select>

Geige

wenn Sie möchten, wie Sie mit Pausen nach jedem Wert ausgedrückt haben;

$('#select-meal-type').change(function(){
    var meals = $(this).val();
    var selectedmeals = meals.join(", "); // there is a break after comma

    alert (selectedmeals); // just for testing what will be printed
})

Wenn Sie auf Änderungen reagieren müssen, können Sie Folgendes versuchen:

document.getElementById('select-meal-type').addEventListener('change', function(e) {
    let values = [].slice.call(e.target.selectedOptions).map(a => a.value));
})

Das [].slice.call(e.target.selectedOptions)wird benötigt, weil e.target.selectedOptionsa zurückgegeben wird HTMLCollection, nicht an Array. Dieser Aufruf konvertiert es in, Arraydamit wir dann die mapFunktion anwenden können, die die Werte extrahiert.

So etwas wie das Folgende wäre meine Wahl:

let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);

Es ist kurz, es ist schnell in modernen Browsern und es ist uns egal, ob es schnell ist oder nicht in Browsern mit einem Marktanteil von 1%.

Beachten Sie, dass selectedOptions in einigen Browsern seit etwa 5 Jahren ein wackeliges Verhalten aufweist, sodass ein Benutzeragenten-Sniff hier nicht völlig aus der Reihe gerät.

Funktioniert überall ohne Abfrage:

var getSelectValues = function (select) {
    var ret = [];

    // fast but not universally supported
    if (select.selectedOptions != undefined) {
        for (var i=0; i < select.selectedOptions.length; i++) {
            ret.push(select.selectedOptions[i].value);
        }

    // compatible, but can be painfully slow
    } else {
        for (var i=0; i < select.options.length; i++) {
            if (select.options[i].selected) {
                ret.push(select.options[i].value);
            }
        }
    }
    return ret;
};