Ausführbare HTML-Docs: Select Dropdown

Q: Wie erstelle ich eine Dropdown-Liste in HTML?

Mit und einem pro Auswahl: Red Blue . Gib dem Select einen name und ein .

Q: Wie lege ich die Standardoption eines Select fest?

Füg dieser Option selected hinzu: Blue . Ohne ist die erste Option ausgewählt. In JavaScript setzt du select.value = 'blue'.

Q: Wie füge ich einem Select einen Platzhalter hinzu?

Mach die erste Option leer und nicht auswählbar: Choose a country . Füg dem required hinzu, damit das Formular erst abgesendet werden kann, wenn eine echte Option gewählt ist.

Q: Wie lese ich den gewählten Wert eines Select in JavaScript aus?

select.value ist der Wert der gewählten Option. Für ihren sichtbaren Text nimm select.selectedOptions[0].text, und hör auf das Event change, um auf eine geänderte Auswahl zu reagieren. Bei einem Mehrfach-Select gehst du mit map über select.selectedOptions.

Q: Was ist der Unterschied zwischen select und datalist?

Ein erlaubt nur die aufgelisteten Optionen. Ein mit schlägt Optionen vor, während der Leser tippt, akzeptiert aber jeden Text. Nimm select, wenn die Antwort eine deiner Optionen sein muss.

Eine Dropdown-Liste ist ein <select>-Element mit einem <option> für jede Auswahl. Der value jeder Option ist das, was das Formular sendet; der Text zwischen den Tags ist das, was der Leser sieht. Wähl eine aus und drück auf Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Das Formular sendet language=js: den name des Select und den value der gewählten Option. selected legt den Standard fest; ohne ist die erste Option gewählt. Hat eine Option keinen value, wird stattdessen ihr Text gesendet.

Verbinde das Label über for und id mit dem Select (oder indem du es drumherum legst), damit ein Klick auf das Label das Dropdown fokussiert und Screenreader es ansagen.

Attribute von select und option

Element	Attribut	Macht
`<select>`	`name`	Der Schlüssel, unter dem der Wert gesendet wird
`<select>`	`required`	Eine echte Option muss gewählt sein, keine leere erste Platzhalter-Option
`<select>`	`multiple`	Mehrere Optionen können gewählt werden
`<select>`	`size`	Wie viele Zeilen sichtbar sind (macht daraus ein Listenfeld)
`<select>`	`disabled`	Das ganze Dropdown ist aus und wird nicht gesendet
`<option>`	`value`	Was gesendet wird, wenn sie gewählt ist
`<option>`	`selected`	Gewählt, wenn die Seite lädt
`<option>`	`disabled`	Wird angezeigt, kann aber nicht gewählt werden
`<optgroup>`	`label`	Die Überschrift der Gruppe

Eine Platzhalter-Option mit required

Ein Select hat immer einen Wert, ohne Platzhalter wird also die erste echte Option gesendet, auch wenn der Leser das Dropdown nie angefasst hat. Eine leere erste Option behebt das, und required stoppt das Absenden, bis eine echte Option gewählt ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Drück auf Continue, bevor du etwas wählst: Der Browser verweigert und bittet dich, einen Eintrag auszuwählen. Der Platzhalter hat value="", was required als leer behandelt, und disabled, damit er nicht wieder gewählt werden kann, sobald ein Land ausgewählt ist.

Optionen mit optgroup gruppieren

<optgroup label="..."> setzt eine Überschrift über eine Reihe von Optionen. Die Überschrift ist nicht auswählbar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Gruppen lassen sich nicht verschachteln: Eine Liste bekommt eine Ebene von Überschriften, mehr nicht. disabled an einer <optgroup> deaktiviert jede Option darin.

Mehrfachauswahl

Mit multiple kann der Leser mehrere Optionen wählen, und aus dem Dropdown wird ein Listenfeld. Halte Strg (Cmd auf dem Mac) gedrückt, um Optionen einzeln hinzuzufügen, oder Shift, um einen Bereich auszuwählen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Das Formular sendet skills=html und skills=css: denselben Namen einmal pro gewählter Option. Viele kennen die Geste Strg+Klick nicht, bei einer Handvoll Optionen ist eine Gruppe von Checkboxen also leichter zu bedienen.

Den Wert in JavaScript lesen und setzen

select.value liest und setzt den Wert der gewählten Option, und das Event change feuert, wenn der Leser eine andere Option wählt. Ein häufiger Einsatz ist ein zweites Dropdown, dessen Optionen vom ersten abhängen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) erzeugt eine Option. select.selectedIndex ist die Position der gewählten Option, und select.selectedOptions listet die gewählten auf; so liest du ein Mehrfach-Select aus.

Ein Select stylen

Die geöffnete Liste des Dropdowns zeichnen Browser und Betriebssystem, und nur wenig davon lässt sich stylen. Den geschlossenen Kasten schon: appearance: none entfernt den nativen Pfeil, und ein Hintergrundbild setzt deinen eigenen an seine Stelle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Der zusätzliche Innenabstand am Ende lässt Platz für den Pfeil, damit langer Optionstext nicht darunter läuft. font: inherit ist hier so wichtig wie bei Buttons: Selects verwenden standardmäßig die kleine Formularschrift des Browsers. Die Optionen in der geöffneten Liste behalten das native Aussehen. Chrome kann auch die geöffnete Liste stylen, wenn du dich mit appearance: base-select dafür entscheidest; Browser ohne diese Unterstützung zeigen die native Liste. Volle Kontrolle überall braucht ein eigenes Widget mit ARIA, und das richtig hinzubekommen ist viel mehr Arbeit, als es aussieht.

Select, Radio Buttons oder datalist?

Nimm	Wenn
`<select>`	Eine Auswahl aus einer langen Liste, oder wenn wenig Platz ist
Radio Buttons	Eine Auswahl aus wenigen Optionen, die alle sichtbar sein sollen (siehe HTML Radio Button)
`<input>` mit `<datalist>`	Vorschläge, aber jeder getippte Wert ist erlaubt

Häufige Fehler

Kein Platzhalter bei einer Pflichtauswahl. Die erste echte Option wird gesendet, auch wenn der Leser sie nie gewählt hat.
Ein Platzhalter mit echtem Wert, etwa value="none". required behandelt ihn als gültige Auswahl. Nimm value="".
Optionen ohne value, wenn der Text lang oder übersetzt ist. Der Server bekommt den sichtbaren Text, der sich mit der Sprache ändert.
multiple bei wenigen Optionen. Checkboxen sind leichter zu bedienen.
Auf click an Optionen hören. Nimm change am <select>; es feuert auch bei Änderungen per Tastatur.
Kein Label. Ein Select, das nur einen Platzhalter hat, hat keinen Namen mehr, sobald eine Option gewählt ist.

Häufig gestellte Fragen

Wie erstelle ich eine Dropdown-Liste in HTML?

Mit <select> und einem <option> pro Auswahl: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Gib dem Select einen name und ein <label>.

Wie lege ich die Standardoption eines Select fest?

Füg dieser Option selected hinzu: <option value="blue" selected>Blue</option>. Ohne ist die erste Option ausgewählt. In JavaScript setzt du select.value = 'blue'.

Wie füge ich einem Select einen Platzhalter hinzu?

Mach die erste Option leer und nicht auswählbar: <option value="" disabled selected>Choose a country</option>. Füg dem <select> required hinzu, damit das Formular erst abgesendet werden kann, wenn eine echte Option gewählt ist.

Wie lese ich den gewählten Wert eines Select in JavaScript aus?

select.value ist der Wert der gewählten Option. Für ihren sichtbaren Text nimm select.selectedOptions[0].text, und hör auf das Event change, um auf eine geänderte Auswahl zu reagieren. Bei einem Mehrfach-Select gehst du mit map über select.selectedOptions.

Was ist der Unterschied zwischen select und datalist?

Ein <select> erlaubt nur die aufgelisteten Optionen. Ein <input> mit <datalist> schlägt Optionen vor, während der Leser tippt, akzeptiert aber jeden Text. Nimm select, wenn die Antwort eine deiner Optionen sein muss.

Verwandte Konzepte