HTMLOptionElement.value — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionElement.value

Beschreibung

Die Eigenschaft value eines HTMLOptionElement spiegelt das HTML-Attribut value des <option>-Elements wider. Genau dieser Wert wird beim Absenden eines Formulars für das zugehörige <select> übertragen. Er landet auch in HTMLSelectElement.value, wenn die Option ausgewählt ist.

Wichtig: Fehlt das Attribut value, gibt die Eigenschaft nicht einfach einen leeren String zurück. Laut HTML-Spezifikation liefert sie dann den Textinhalt der Option (text). Leerzeichen am Anfang und Ende werden dabei entfernt, mehrfache Leerzeichen werden zu einem zusammengefasst. Einen leeren String bekommt man nur, wenn value="" ausdrücklich gesetzt ist oder die Option keinen Text hat.

Wenn Sie die Eigenschaft setzen, wird das value-Attribut im DOM geschrieben oder überschrieben. Jeder zugewiesene Wert wird in einen String umgewandelt. Typische Einsatzfälle: Auswahllisten dynamisch aufbauen, etwa aus API-Daten, die Auswahl des Nutzers auswerten und den angezeigten Text (text) vom technischen Wert (value) trennen, zum Beispiel über IDs oder Ländercodes.

Parameter

Name	Typ	Default	Beschreibung
$neuerWert	string		Nur beim Setzen: der neue Wert der Option. Andere Typen werden in einen String umgewandelt (z. B. `42` → `"42"`, `null` → `"null"`).

Rückgabewert

Typ

string

Beschreibung

Der Inhalt des value-Attributs. Fehlt das Attribut, der Textinhalt der Option ohne Leerzeichen am Rand und mit zusammengefassten Leerzeichen.

Beispiele

Wert lesen – mit und ohne value-Attribut

// HTML:
// <select id="farbe">
//   <option value="r">Rot</option>
//   <option>  Grün   Hell  </option>
//   <option value="">Keine</option>
// </select>
const optionen = document.querySelector('#farbe').options;

console.log(optionen[0].value); // Attribut vorhanden
console.log(optionen[1].value); // kein Attribut → bereinigter Text
console.log(JSON.stringify(optionen[2].value)); // leeres Attribut

r Grün Hell ""

Auswahlliste aus API-Daten aufbauen

const laender = [
  { code: 'DE', name: 'Deutschland' },
  { code: 'AT', name: 'Österreich' },
  { code: 'CH', name: 'Schweiz' }
];

const select = document.createElement('select');
select.name = 'land';

for (const { code, name } of laender) {
  const option = document.createElement('option');
  option.value = code;       // technischer Wert für das Formular
  option.textContent = name; // sichtbarer Text
  select.append(option);
}

document.body.append(select);
console.log(select.options[1].value, select.options[1].text);

AT Österreich

Ausgewählte Werte eines Mehrfach-Selects auslesen

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

tags.addEventListener('change', () => {
  const werte = Array.from(tags.selectedOptions, (opt) => opt.value);
  console.log('Ausgewählt:', werte);
});

Ausgewählt: ["js", "css"]

Wert setzen und Typumwandlung

const option = new Option('Premium-Tarif');
console.log(option.value);           // noch kein Attribut → Text

option.value = 42;                   // Zahl wird zu String
console.log(typeof option.value, option.value);
console.log(option.getAttribute('value'));

Premium-Tarif string 42 42

// Wichtig · Fallstricke

Fallstrick Rückfall auf den Text: Ohne value-Attribut liefert die Eigenschaft den Text der Option. Wer eine Platzhalter-Option wie <option>Bitte wählen</option> auf einen leeren Wert prüft, bekommt stattdessen "Bitte wählen". Setzen Sie deshalb ausdrücklich value="". Ob das Attribut vorhanden ist, prüfen Sie mit option.hasAttribute('value').
Immer ein String: Auch numerische Werte kommen als String zurück. Wenn Sie rechnen wollen, wandeln Sie den Wert vorher mit Number() oder parseInt() um. Bei null wird der String "null" gesetzt, nicht ein leerer String.
Nicht dasselbe wie die Auswahl: Wenn Sie option.value ändern, wird die Option nicht ausgewählt. Dafür nutzen Sie option.selected = true oder select.value = '…'.
Sicherheit: Werte immer über value/textContent setzen und nicht per innerHTML zusammensetzen. Sonst droht XSS, wenn die Daten von Nutzern stammen. Übertragene Formularwerte können auf dem Server manipuliert ankommen und müssen dort geprüft werden.
Kompatibilität: Wird von allen Browsern seit Langem unterstützt. Einige sehr alte Internet-Explorer-Versionen fielen ohne Attribut nicht zuverlässig auf den Text zurück.

Siehe auch

HTMLButtonElement.value HTMLOptionElement.label HTMLOptionElement.form HTMLOptionElement.index HTMLOptionElement.text