HTMLSelectElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.type

Beschreibung

Die schreibgeschützte Eigenschaft type eines HTMLSelectElement gibt einen String zurück, der die Art der Auswahlliste beschreibt. Der Wert hängt ausschließlich vom booleschen Attribut multiple ab:

"select-one": Es kann nur eine Option ausgewählt werden (kein multiple-Attribut).
"select-multiple": Mehrere Optionen können ausgewählt werden (multiple ist gesetzt).

Nützlich ist die Eigenschaft vor allem bei generischem Formular-Code, der über form.elements iteriert und je nach Steuerelement unterschiedlich vorgehen muss. So lässt sich ein <select> wie ein <input> über element.type unterscheiden, ohne zusätzlich tagName prüfen zu müssen.

Da der Wert live aus dem multiple-Attribut abgeleitet wird, ändert er sich sofort, wenn select.multiple per Skript umgeschaltet wird. Die Eigenschaft selbst kann nicht beschrieben werden.

Rückgabewert

Typ

"select-one" | "select-multiple"

Beschreibung

"select-multiple", wenn das Attribut multiple gesetzt ist, sonst "select-one".

Beispiele

Typ einer Auswahlliste abfragen

// HTML: <select id="land"></select>
//       <select id="tags" multiple></select>
const land = document.getElementById('land');
const tags = document.getElementById('tags');

console.log(land.type);
console.log(tags.type);

select-one select-multiple

Formularwerte generisch auslesen

const serialisiereFormular = (form) => {
  const daten = {};
  for (const el of form.elements) {
    if (!el.name) continue;
    switch (el.type) {
      case 'select-multiple':
        daten[el.name] = [...el.selectedOptions].map((o) => o.value);
        break;
      case 'select-one':
        daten[el.name] = el.value;
        break;
      case 'checkbox':
        daten[el.name] = el.checked;
        break;
      default:
        daten[el.name] = el.value;
    }
  }
  return daten;
};

console.log(serialisiereFormular(document.querySelector('form')));

{ land: "de", tags: ["js", "css"], newsletter: true }

Typ ändert sich mit multiple

const select = document.createElement('select');
console.log(select.type);

select.multiple = true;
console.log(select.type);

// Zuweisung an type wird ignoriert (Strict Mode: TypeError)
try {
  'use strict';
  select.type = 'select-one';
} catch (e) {
  console.log(e.name);
}
console.log(select.type);

select-one select-multiple select-multiple

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung an type wird im Sloppy Mode stillschweigend ignoriert und löst in Modulen bzw. im Strict Mode einen TypeError aus. Um den Typ zu ändern, select.multiple setzen.
Das Attribut size hat keinen Einfluss auf type: Ein <select size=\"5\"> ohne multiple ist weiterhin "select-one", obwohl es als Liste dargestellt wird.
Bei "select-multiple" liefert value nur den Wert der ersten ausgewählten Option – für alle Werte selectedOptions verwenden.
Ein HTML-Attribut type gibt es auf <select> nicht; getAttribute('type') liefert daher null.
Wird von allen Browsern seit jeher unterstützt.

Siehe auch

HTMLSelectElement HTMLSelectElement.multiple HTMLSelectElement.selectedOptions HTMLSelectElement.value HTMLInputElement.type HTMLFormElement.elements HTMLMeterElement.min