Signatur
Beschreibung
Die Eigenschaft text gibt den Textinhalt eines <option>-Elements als Zeichenkette zurück, also den Text, den der Nutzer in der Auswahlliste sieht. Anders als textContent wird der Wert normalisiert: Leerraum am Anfang und Ende wird entfernt, und mehrere Leerzeichen, Tabulatoren oder Zeilenumbrüche im Text werden zu einem einzigen Leerzeichen zusammengefasst. Text aus eingebetteten <script>-Elementen wird dabei ausgelassen.
Beim Schreiben verhält sich text wie textContent: Alle Kindknoten der Option werden durch einen einzigen Textknoten mit dem neuen Wert ersetzt. Der Wert wird als reiner Text eingefügt, HTML wird also nicht interpretiert.
In der Praxis braucht man text vor allem, um den Anzeigetext der ausgewählten Option auszulesen, etwa für Zusammenfassungen, Protokolle oder Bestätigungsdialoge. Den übermittelten Formularwert liefert dagegen value. Hat die Option kein value-Attribut, gibt auch value den Text zurück.
Wichtig ist der Unterschied zu label: label liefert den Wert des label-Attributs, falls es gesetzt ist, und sonst den Text. text gibt immer den echten Textinhalt zurück.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | Nur beim Setzen: der neue Anzeigetext der Option. Er ersetzt alle Kindknoten und wird als reiner Text eingefügt, nicht als HTML. |
Rückgabewert
Beispiele
Anzeigetext der ausgewählten Option auslesen
// <select id="land">
// <option value="de">Deutschland</option>
// <option value="at" selected>Österreich</option>
// </select>
const select = document.querySelector('#land');
select.addEventListener('change', () => {
const option = select.options[select.selectedIndex];
console.log(`Wert: ${option.value}, Anzeige: ${option.text}`);
});
// Aktueller Zustand
const aktuell = select.selectedOptions[0];
console.log(aktuell.text);Leerraum-Normalisierung im Vergleich zu textContent
const option = document.createElement('option');
option.innerHTML = '\n Premium \n Paket ';
console.log(JSON.stringify(option.textContent));
console.log(JSON.stringify(option.text));Optionstext dynamisch ändern (z. B. mit Lagerbestand)
const bestand = { s: 0, m: 4, l: 12 };
const select = document.createElement('select');
for (const [groesse, anzahl] of Object.entries(bestand)) {
const option = new Option(groesse.toUpperCase(), groesse);
// text setzen: reiner Text, kein HTML
option.text = `${groesse.toUpperCase()} (${anzahl > 0 ? anzahl + ' verfügbar' : 'ausverkauft'})`;
option.disabled = anzahl === 0;
select.add(option);
}
console.log([...select.options].map((o) => o.text));Unterschied zwischen text und label
const option = document.createElement('option');
option.textContent = 'Vereinigtes Königreich';
option.label = 'UK';
console.log(option.text); // echter Textinhalt
console.log(option.label); // Attribut hat Vorrang// Wichtig · Fallstricke
- Normalisierung:
textliefert nicht den Rohtext. Wer Zeilenumbrüche oder mehrfache Leerzeichen genau braucht, solltetextContentverwenden. - Setzen entfernt Kindknoten: Die Zuweisung ersetzt den gesamten Inhalt der Option. Da der Wert als reiner Text eingefügt wird, ist das sicher gegen XSS, ganz anders als bei
innerHTML. - Nicht mit
valueverwechseln: Beim Absenden eines Formulars wirdvalueübertragen, nichttext. Nur wenn dasvalue-Attribut fehlt, liefern beide denselben Inhalt. - Anzeige kann abweichen: Ist ein
label-Attribut gesetzt, zeigen Browser in der Regel das Label an, währendtextweiterhin den Textinhalt zurückgibt. - Kompatibilität: Die Eigenschaft wird seit jeher in allen Browsern unterstützt. Die genaue Leerraum-Normalisierung entspricht dem HTML Living Standard. Sehr alte Browser wie IE haben hier teilweise anders normalisiert.