Standardwert in HTML auswählen

Dieser Artikel zeigt, wie Sie eine Option in einem HTML-Drop-down-Menü zur anfänglichen Auswahl machen. Setzen Sie das Attribut selected auf das gewünschte <option>-Element innerhalb von <select>. Sie können das Attribut mit einem expliziten Wert oder als boolesches Attribut ohne Wert schreiben. Beide Beispiele unten verwenden dieselben Optionen und Werte, damit Sie die beiden Schreibweisen direkt vergleichen können.

Eine Standardoption mit selected="selected" festlegen

Schreiben Sie selected="selected" in das öffnende Tag der Option, die beim ersten Laden der Seite ausgewählt sein soll. Das Attribut gehört auf <option>, nicht auf <select> und auch nicht in ein separates <selected>-Tag. In diesem Beispiel ist anfangs die dritte Option ausgewählt; ihr übermittelter Wert ist 3.

Die ausgewählte Option bleibt an ihrer ursprünglichen Stelle in der Liste. Das Attribut legt die anfängliche Auswahl fest, verschiebt die Option aber nicht vor die anderen Einträge. Wer die Seite verwendet, kann eine andere Option auswählen; diese wird dann zur aktuellen Auswahl.

Mit dem Attribut name erhält das Steuerelement einen Feldnamen im Formular. Der value der ausgewählten Option liefert den Wert dieses Feldes, wenn das Formular übermittelt wird. Das Label ist über übereinstimmende for- und id-Werte mit dem Steuerelement verknüpft. So bleibt die Auswahl auch für Menschen verständlich, die Hilfstechnologien verwenden. Soll eine andere Option vorausgewählt sein, verschieben Sie das Attribut selected auf diese Option.

Der folgende HTML-Code ist ein statisches Markup-Beispiel. Er veranschaulicht den Quelltext der Seite und ist kein Ausführungsergebnis.

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Dieses ausführbare JavaScript-Beispiel bildet die Optionswerte aus dem Markup nach und gibt den Wert der als ausgewählt markierten Option aus. Das Verhalten im Browser zeigen die HTML-Beispiele oben.

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

Das boolesche Attribut selected verwenden

selected ist ein boolesches Attribut: Sobald es vorhanden ist, markiert es die Option als anfängliche Auswahl. In HTML können Sie den Wert weglassen und nur selected schreiben oder die oben gezeigte explizite Form selected="selected" verwenden. In diesem Beispiel drücken beide Schreibweisen dieselbe Auswahl aus; der Attributname muss selected bleiben.

In diesem passenden Beispiel ist die zweite Option anfangs ausgewählt. Ihr value ist 2, während der angezeigte Text Two lautet. Mit einem value für jede Option bleibt der Formularwert klar vom angezeigten Label getrennt. Wird das Formular übermittelt, bevor die lesende Person die Auswahl ändert, wird der Wert der ausgewählten Option übermittelt.

Verwenden Sie diese boolesche Schreibweise, wenn Sie knappes HTML bevorzugen. Fügen Sie sie in das öffnende Tag genau der Option ein, die ausgewählt sein soll. Schreiben Sie nicht <selected> hinter eine Option: Das ist nicht die Attributsyntax. Die Option bleibt an ihrer Position in der Liste, und die lesende Person kann weiterhin einen anderen Wert auswählen.

Auch dies ist ein statisches Markup-Beispiel und keine Laufzeitausgabe.

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>