HTMLSelectElement.value — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.value

Beschreibung

Die Eigenschaft value eines HTMLSelectElement liefert den Wert der ersten ausgewählten Option als String. Hat die Option ein value-Attribut, wird dessen Inhalt zurückgegeben, sonst ihr Textinhalt (mit bereinigten Leerzeichen). Ist keine Option ausgewählt, ist der Wert ein leerer String "".

Weist man value einen String zu, wählt der Browser die erste Option aus, deren Wert exakt übereinstimmt, und hebt alle anderen Auswahlen auf. Gibt es keine passende Option, wird gar keine Option ausgewählt (selectedIndex wird -1). So lassen sich Auswahllisten bequem aus gespeicherten Daten, URL-Parametern oder Formularzuständen vorbelegen.

Bei Mehrfachauswahl (<select multiple>) liefert value nur den Wert der ersten ausgewählten Option. Für alle Werte muss man über selectedOptions iterieren.

Rückgabewert

Typ

string

Beschreibung

Der Wert der ersten ausgewählten Option oder "", wenn keine Option ausgewählt ist. Beim Setzen wird ein beliebiger Wert in einen String umgewandelt.

Beispiele

Aktuellen Wert beim Ändern auslesen

// HTML: <select id="land"><option value="de">Deutschland</option><option value="at">Österreich</option><option value="ch">Schweiz</option></select>
const land = document.querySelector('#land');

land.addEventListener('change', () => {
  console.log(`Gewählt: ${land.value}`);
});

Gewählt: at (nach Auswahl von „Österreich“)

Auswahl aus gespeichertem Wert vorbelegen

const sprache = document.querySelector('#sprache');
const gespeichert = localStorage.getItem('sprache') ?? 'de';

sprache.value = gespeichert;

// Prüfen, ob der Wert überhaupt existiert
if (sprache.selectedIndex === -1) {
  sprache.value = 'de'; // Rückfall auf Standard
}
console.log(sprache.value);

de

Mehrfachauswahl: value liefert nur den ersten Wert

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

console.log(tags.value); // nur die erste Auswahl

const alle = Array.from(tags.selectedOptions, (opt) => opt.value);
console.log(alle);

js ["js", "css", "html"]

Option ohne value-Attribut

const select = document.createElement('select');
select.innerHTML = '<option>  Rot  </option><option value="g">Grün</option>';

console.log(JSON.stringify(select.value)); // Textinhalt, Leerzeichen bereinigt
select.value = 'g';
console.log(select.selectedIndex);

"Rot" 1

// Wichtig · Fallstricke

Kein passender Wert: Wird ein nicht vorhandener Wert zugewiesen, ist danach keine Option ausgewählt (selectedIndex === -1, value === "") – es wird kein Fehler geworfen.
Kein Event: Das programmatische Setzen von value löst weder change noch input aus. Bei Bedarf manuell select.dispatchEvent(new Event('change', { bubbles: true })) aufrufen.
Immer String: Auch numerische Werte kommen als String zurück – vor Vergleichen oder Rechnungen mit Number() umwandeln.
Mehrfachauswahl: Bei multiple nur der erste Wert; alle Werte über selectedOptions ermitteln.
Deaktivierte Optionen (disabled) können per value trotzdem ausgewählt werden, werden aber bei deaktiviertem <select> nicht mit dem Formular übermittelt.
In allen modernen Browsern einheitlich unterstützt.

Siehe auch

HTMLFieldSetElement.validity HTMLSelectElement.name HTMLSelectElement.size HTMLSelectElement.type HTMLSelectElement.form