<selectedcontent>: Das Anzeigeelement der ausgewählten Option

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Das <selectedcontent> HTML-Element kann verwendet werden, um den Inhalt der aktuell ausgewählten <option> in einem geschlossenen <select>-Element anzuzeigen.

Attribute

Das <selectedcontent>-Element enthält die globalen Attribute, diese werden jedoch im Wesentlichen ignoriert, da das Element, wenn es korrekt als Kind eines Auswahlknopfes verwendet wird, inert gerendert wird.

Der Auswahlknopf und all sein Inhalt sind standardmäßig inert, sodass er wie ein einzelner Knopf behandelt wird, selbst wenn interaktive Kinder (z. B. Links oder Schaltflächen) darin enthalten sind.

Keine weiteren Attribute sind für <selectedcontent> definiert.

Beschreibung

Beim Erstellen eines anpassbaren Auswahl-Elements können Sie das <selectedcontent>-Element innerhalb eines <button>-Elements einfügen, das wiederum das erste Kind des <select>-Elements sein muss:

html

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>

  ...
</select>

<selectedcontent> enthält eine Kopie des derzeit im <select>-Element ausgewählten <option>-Elementinhalts, erstellt mit cloneNode() im Hintergrund.

Jeder nachfolgende <select>-Inhalt wird im Dropdown-Auswahlinstrument enthalten sein.

Wann immer das ausgewählte <option>-Element von einem <select>-Element von einer Option zu einer anderen wechselt, wird der Inhalt des <selectedcontent>-Elements entfernt und durch eine neue geklonte Kopie der DOM-Struktur der neu ausgewählten option ersetzt, erstellt mit cloneNode().

Stilierung mit CSS

Es ist nützlich, den Inhalt des aktuell ausgewählten <option>-Elements, wie er innerhalb des Auswahlknopfes erscheint, mit CSS-Stilen anzuvisieren, ohne die Stilierung des Inhalts innerhalb des Auswahlinstruments zu beeinflussen.

Ihre <option>-Elemente könnten beispielsweise Symbole, Bilder oder sogar Videos enthalten. Dieser Inhalt sieht möglicherweise innerhalb des Auswahlinstruments gut aus, könnte jedoch dazu führen, dass der Auswahlknopf größer wird, unordentlich aussieht und das umliegende Layout beeinträchtigt.

Dies könnte behoben werden, indem der problematische Inhalt ausgeblendet wird, wenn er innerhalb von <selectedcontent> enthalten ist. Beispielsweise:

css

selectedcontent img {
  display: none;
}

Hinweis: Wenn die <button>- und/oder <selectedcontent>-Elemente nicht innerhalb des <select>-Markups enthalten sind, wird der ausgewählte Optionsinhalt implizit in den Auswahlknopf eingefügt, aber diese Zuordnung wird nicht möglich sein.

Beispiele

Ein vollständiges Beispiel, das das <selectedcontent>-Element beinhaltet, finden Sie in unserem Leitfaden für anpassbare Auswahl-Elemente.

Technische Zusammenfassung

Inhaltskategorien	Keine
Erlaubter Inhalt	Spiegelt den Inhalt des ausgewählten `<option>` wider.
Tag-Auslassung	Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Erlaubte Eltern	Ein `<button>`-Element, das das erste Kind eines `<select>`-Elements ist.
Implizite ARIA-Rolle	Keine
Erlaubte ARIA-Rollen	Keine
DOM-Schnittstelle	[`HTMLSelectedContentElement`](/de/docs/Web/API/HTMLSelectedContentElement)

Das <select>-Element
Das <option>-Element
Das <optgroup>-Element
Anpassbare Auswahl-Elemente

<selectedcontent>: Das Anzeigeelement der ausgewählten Option

Attribute

Beschreibung

Stilierung mit CSS

Beispiele

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

In diesem Artikel