HTML
Auswahlmenü-Steuerelemente

Syntax

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Wählen Sie Menü

Das Element <select> erzeugt ein Dropdown-Menü, aus dem der Benutzer eine Option auswählen kann.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Größe ändern

Sie können die Größe des Auswahlmenüs mit dem size ändern. Bei einer Größe von 0 oder 1 wird das Standard-Dropdown-Menü angezeigt. Bei einer Größe von mehr als 1 wird das Dropdown-Menü in ein Feld umgewandelt, in dem so viele Zeilen angezeigt werden, wobei pro Zeile eine Option und eine Bildlaufleiste zum Blättern durch die verfügbaren Optionen angezeigt werden.

<select name="" size="4"></select>

Multioptionsauswahlmenüs

Standardmäßig können Benutzer nur eine einzige Option auswählen. Durch das Hinzufügen des multiple Attributs können Benutzer mehrere Optionen gleichzeitig auswählen und alle ausgewählten Optionen mit dem Formular übermitteln. Durch die Verwendung des Attributs multiple wird das Dropdown-Menü automatisch in eine Box umgewandelt, als wäre eine Größe definiert. In diesem Fall wird die Standardgröße durch den von Ihnen verwendeten Browser festgelegt. Es ist nicht möglich, sie wieder in ein Dropdown-Menü zu ändern, während mehrere Optionen ausgewählt werden.

<select name="" multiple></select>

Bei Verwendung des multiple Attributs besteht ein Unterschied zwischen der Verwendung von 0 und 1 für die Größe, wohingegen kein Unterschied besteht, wenn das Attribut nicht verwendet wird. Die Verwendung von 0 bewirkt, dass sich der Browser in der von ihm programmierten Standardeinstellung verhält. Bei Verwendung von 1 wird die Größe des resultierenden Felds explizit auf nur eine Zeile hoch festgelegt.

Optionsgruppen

Sie können Ihre Optionen innerhalb eines Auswahlmenüs ordentlich gruppieren, um ein strukturierteres Layout in einer langen Liste von Optionen bereitzustellen, indem Sie das Element <optgroup> verwenden.

Die Syntax ist sehr einfach, indem einfach das Element mit einem label wird, um den Titel für die Gruppe zu identifizieren und null oder mehr Optionen zu enthalten, die innerhalb dieser Gruppe stehen sollten.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Bei der Verwendung von Optionsgruppen müssen nicht alle Optionen in einer Gruppe enthalten sein. Durch Deaktivieren einer Optionsgruppe werden auch alle Optionen in der Gruppe deaktiviert, und es ist nicht möglich, eine einzelne Option in einer deaktivierten Gruppe manuell erneut zu aktivieren.

Optionen

Die Optionen innerhalb eines Auswahlmenüs werden vom Benutzer ausgewählt. Die normale Syntax für eine Option lautet wie folgt:

<option>Some Option</option>

Beachten Sie jedoch, dass der Text im <option> -Element selbst nicht immer verwendet wird und im Wesentlichen der Standardwert für Attribute ist, die nicht angegeben sind.

Die Attribute, die das tatsächliche Aussehen und die Funktion der Option steuern, sind value und label . Die Beschriftung stellt den Text dar, der im Dropdown-Menü angezeigt wird (was Sie gerade betrachten und auf das Sie klicken werden, um es auszuwählen). Der Wert stellt den Text dar, der zusammen mit dem Formular gesendet wird. Wenn einer dieser Werte ausgelassen wird, wird stattdessen der Text innerhalb des Elements als Wert verwendet. So könnte das Beispiel, das wir oben gegeben haben, darauf "erweitert" werden:

<option label="Some Option" value="Some Option">

Beachten Sie die Auslassung des Innentextes und des End-Tags, die nicht unbedingt erforderlich sind, um eine Option innerhalb des Menüs zu erstellen. Wenn sie enthalten sind, wird der Innentext ignoriert, da beide Attribute bereits angegeben wurden und der Text nicht benötigt wird. Allerdings werden Sie wahrscheinlich nicht viele Leute sehen, die sie so schreiben. Die gebräuchlichste Art und Weise, in der geschrieben wird, ist ein Wert, der an den Server gesendet wird, zusammen mit dem Innentext, der schließlich zum Label-Attribut wird:

<option value="option1">Some Option</option>

Standardmäßig eine Option auswählen

Sie können auch eine bestimmte Option angeben, die standardmäßig im Menü selected werden soll, indem Sie das selected Attribut daran anhängen. Wenn im Menü keine Option als ausgewählt ausgewählt ist, wird beim Rendern standardmäßig die erste Option im Menü ausgewählt. Wenn mehr als eine Option mit dem selected Attribut verknüpft ist, ist die letzte im Menü mit dem Attribut vorhandene Option die standardmäßig ausgewählte.

<option value="option1" selected>Some option</option>

Wenn Sie das Attribut in einem Auswahlmenü mit mehreren Optionen verwenden, werden standardmäßig alle Optionen mit dem Attribut ausgewählt. Wenn keine Optionen über das Attribut verfügen, werden keine Optionen ausgewählt.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datenhändler

Das <datalist> -Tag gibt eine Liste vordefinierter Optionen für ein <input> -Element an. Es bietet eine "Autovervollständigung" für <input> -Elemente. Die Benutzer sehen beim Schreiben eine Dropdown-Liste mit Optionen.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Browser-Unterstützung