HTMLSelectElement.multiple — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.multiple

Beschreibung

Die Eigenschaft multiple des HTMLSelectElement-Interfaces spiegelt das gleichnamige HTML-Attribut. Ist sie true, kann der Benutzer mehrere <option>-Einträge gleichzeitig auswählen, auf dem Desktop meist mit Strg/Cmd oder Umschalt. Ist sie false (Standard), ist höchstens eine Option ausgewählt.

Die Eigenschaft ist lesbar und schreibbar. Wenn man sie auf true setzt, wird das Attribut multiple hinzugefügt, bei false wird es entfernt. Damit ändert sich auch die Darstellung: Statt eines Aufklapp-Menüs zeigen die meisten Browser eine Listbox mit mehreren sichtbaren Zeilen an (die Anzahl steuert size, Standard ist meist 4).

Wichtig für die Auswertung: Bei Mehrfachauswahl liefert select.value nur den Wert der ersten ausgewählten Option. Alle ausgewählten Werte bekommt man über select.selectedOptions oder indem man select.options nach option.selected filtert. Außerdem ändert sich der Wert von select.type von "select-one" auf "select-multiple".

Beispiele

Mehrfachauswahl abfragen und umschalten

// HTML: <select id="tags"><option>JS</option><option>CSS</option><option>HTML</option></select>
const select = document.querySelector('#tags');

console.log(select.multiple, select.type);

select.multiple = true; // setzt das Attribut multiple
console.log(select.multiple, select.type);
console.log(select.hasAttribute('multiple'));

false "select-one" true "select-multiple" true

Alle ausgewählten Werte auslesen

// HTML: <select id="sprachen" multiple>
//   <option value="de" selected>Deutsch</option>
//   <option value="en">Englisch</option>
//   <option value="fr" selected>Französisch</option>
// </select>
const select = document.querySelector('#sprachen');

const werte = select.multiple
  ? Array.from(select.selectedOptions, (opt) => opt.value)
  : [select.value];

console.log(werte);
console.log(select.value); // nur der erste ausgewählte Wert!

["de", "fr"] "de"

Mehrfachauswahl per Checkbox umschalten und Auswahl bereinigen

// HTML: <label><input type="checkbox" id="mehrere"> Mehrere erlauben</label>
//       <select id="farben">...</select>
const toggle = document.querySelector('#mehrere');
const select = document.querySelector('#farben');

toggle.addEventListener('change', () => {
  select.multiple = toggle.checked;
  if (!select.multiple) {
    // Nur die erste Auswahl behalten
    const erste = select.selectedOptions[0];
    for (const opt of select.options) opt.selected = opt === erste;
  }
});

Formular mit Mehrfachauswahl per FormData senden

// HTML: <form id="f"><select name="tags" multiple>...</select></form>
const form = document.querySelector('#f');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const daten = new FormData(form);
  // getAll statt get, da mehrere Einträge mit gleichem Namen entstehen
  console.log(daten.getAll('tags'));
  await fetch('/api/tags', { method: 'POST', body: daten });
});

["js", "css"]

// Wichtig · Fallstricke

value reicht nicht: Bei multiple = true liefert select.value nur die erste ausgewählte Option. Nutze selectedOptions oder filtere options.
Formulardaten: Jede ausgewählte Option wird als eigenes Name-Wert-Paar übertragen. In FormData also getAll() verwenden. Serverseitig (z. B. PHP) braucht man oft einen Namen wie name="tags[]".
Umschalten auf false: Waren vorher mehrere Optionen ausgewählt, setzt der Browser die Auswahl zurück, sodass höchstens eine übrig bleibt. Welche das ist, kann je nach Browser unterschiedlich sein. Deshalb die Auswahl besser selbst bereinigen.
Bedienbarkeit: Auf Mobilgeräten zeigen iOS/Android eigene Auswahldialoge mit Checkboxen. Auf dem Desktop ist die Bedienung mit Strg/Umschalt für viele Nutzer nicht offensichtlich. Ein Hinweistext oder Checkboxen als Alternative sind oft benutzerfreundlicher.
Darstellung: Mit multiple wird aus dem Aufklapp-Menü eine Listbox. Die sichtbare Höhe lässt sich über size anpassen.
Die Eigenschaft wird von allen Browsern seit jeher unterstützt.

Siehe auch

HTMLSelectElement HTMLSelectElement.selectedOptions HTMLSelectElement.options HTMLSelectElement.value HTMLSelectElement.size HTMLSelectElement.type HTMLOptionElement.selected FormData.getAll()