0Pricing
HTML Academy · Lektion

Select und option: Dropdown-Menüs

Erstellen Sie Dropdown-Auswahllisten mit select und option

Select und option: Dropdown-Menüs ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das select-Element

Das <select>-Element erstellt ein Dropdown-Menü:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

option: value im Vergleich zum Text

Jedes <option>-Element hat einen value-Wert, der an den Server gesendet wird, und einen Anzeigetext:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

selected-Attribut

Wählen Sie eine Option mit dem Attribut selected vorab aus:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup für kategorisierte Optionen

Gruppieren Sie zusammengehörige Optionen mit <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

multiple-Attribut

Erlauben Sie die Auswahl mehrerer Optionen mit dem Attribut multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

size-Attribut

Das Attribut size legt fest, wie viele Optionen sichtbar sind:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Deaktivierte Optionen und Gruppen

Deaktivieren Sie einzelne Optionen oder ganze Gruppen:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

select gestalten

Die Gestaltung eines nativen <select>-Elements ist eingeschränkt – Folgendes funktioniert:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Benutzerdefinierte Dropdowns im Vergleich zu nativen selects

Abwägungen bei der Verwendung einer benutzerdefinierten Dropdown-Komponente:

  • Native select – standardmäßig barrierefrei, mobilfreundlich und ohne JavaScript funktionsfähig
  • Benutzerdefiniertes Dropdown – vollständige Kontrolle über die Gestaltung, erfordert aber eine vollständige ARIA-Implementierung und eine eigene Tastatursteuerung

Bevorzugen Sie für die meisten Anwendungsfälle das native <select>-Element.

Ausgewählten Wert in JavaScript auslesen

Lesen Sie den ausgewählten Wert mit JavaScript aus oder legen Sie ihn fest:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Muster für eine Platzhalteroption

Erstellen Sie eine nicht auswählbare Platzhalteroption:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Kurze Überprüfung

Welches Element gruppiert zusammengehörige Optionen innerhalb eines select-Dropdowns?

Zusammenfassung: select und option

Grundlagen zu Dropdowns:

  • <select> + <option> – Dropdown-Menü
  • value bei option – der an den Server übermittelte Wert
  • selected – eine Option vorab auswählen
  • <optgroup label> – zusammengehörige Optionen gruppieren
  • multiple – mehrere Auswahlen erlauben
  • size – N Optionen ohne Dropdown anzeigen

Häufig gestellte Fragen

Ist die Lektion „Select und option: Dropdown-Menüs“ kostenlos?

Ja — der vollständige Text von „Select und option: Dropdown-Menüs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Select und option: Dropdown-Menüs“?

Erstellen Sie Dropdown-Auswahllisten mit select und option Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Select und option: Dropdown-Menüs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Select und option: Dropdown-Menüs
  2. Textarea für mehrzeilige Eingaben
  3. Gruppen aus Kontrollkästchen und Optionsfeldern
  4. Datalist für die automatische Vervollständigung
← Zurück zu HTML Academy