HTMLSelectElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das HTMLSelectElement Interface repräsentiert ein <select> HTML Element. Diese Elemente teilen auch alle Eigenschaften und Methoden anderer HTML-Elemente über das HTMLElement Interface.

EventTarget Node Element HTMLElement HTMLSelectElement

Instanz-Eigenschaften

Dieses Interface erbt die Eigenschaften von HTMLElement, sowie von Element und Node.

HTMLSelectElement.disabled

Ein boolescher Wert, der das disabled HTML-Attribut widerspiegelt und anzeigt, ob das Steuerelement deaktiviert ist. Wenn es deaktiviert ist, akzeptiert es keine Klicks.

HTMLSelectElement.form Nur lesbar

Ein HTMLFormElement, das das Formular referenziert, mit dem dieses Element assoziiert ist. Wenn das Element nicht mit einem <form> Element assoziiert ist, gibt es null zurück.

HTMLSelectElement.labels Nur lesbar

Ein NodeList von <label> Elementen, die mit dem Element verbunden sind.

HTMLSelectElement.length

Ein unsigned long, der die Anzahl der <option>-Elemente in diesem select-Element darstellt.

HTMLSelectElement.multiple

Ein boolescher Wert, der das multiple HTML-Attribut widerspiegelt und anzeigt, ob mehrere Elemente ausgewählt werden können.

HTMLSelectElement.name

Ein String, der das name HTML-Attribut widerspiegelt und den Namen dieses Steuerelements enthält, der von Servern und DOM-Suchfunktionen verwendet wird.

HTMLSelectElement.options Nur lesbar

Eine HTMLOptionsCollection, die die Menge der <option> (HTMLOptionElement) Elemente, die von diesem Element enthalten sind, darstellt.

HTMLSelectElement.required

Ein boolescher Wert, der das required HTML-Attribut widerspiegelt und anzeigt, ob der Benutzer verpflichtet ist, einen Wert auszuwählen, bevor er das Formular absendet.

HTMLSelectElement.selectedIndex

Ein long, der den Index des ersten ausgewählten <option>-Elements widerspiegelt. Der Wert -1 zeigt an, dass kein Element ausgewählt ist.

HTMLSelectElement.selectedOptions Nur lesbar

Eine HTMLCollection, die die Menge der ausgewählten <option> Elemente darstellt.

HTMLSelectElement.size

Ein long, der das size HTML-Attribut widerspiegelt und die Anzahl der sichtbaren Elemente im Steuerelement enthält. Der Standardwert ist 1, es sei denn, multiple ist true, in diesem Fall sind es 4.

HTMLSelectElement.type Nur lesbar

Ein String, der den Typ des Formular-Steuerelements darstellt. Wenn multiple true ist, gibt es "select-multiple" zurück; andernfalls gibt es "select-one" zurück.

HTMLSelectElement.validationMessage Nur lesbar

Ein String, der eine lokalisierte Nachricht darstellt und die Validierungsbeschränkungen beschreibt, die das Steuerelement nicht erfüllt (falls vorhanden). Dieses Attribut ist der leere String, wenn das Steuerelement kein Kandidat für die Einschränkungsvalidierung ist (willValidate ist false), oder es seine Einschränkungen erfüllt.

HTMLSelectElement.validity Nur lesbar

Ein ValidityState, der den Gültigkeitszustand widerspiegelt, in dem sich dieses Steuerelement befindet.

HTMLSelectElement.value

Ein String, der den Wert des Formular-Steuerelements widerspiegelt. Gibt die value-Eigenschaft des ersten ausgewählten Optionselements zurück, falls vorhanden, andernfalls den leeren String.

HTMLSelectElement.willValidate Nur lesbar

Ein boolescher Wert, der anzeigt, ob das Steuerelement ein Kandidat für die Einschränkungsvalidierung ist. Es ist false, wenn irgendwelche Bedingungen die Einschränkungsvalidierung verhindern.

Instanz-Methoden

Dieses Interface erbt die Methoden von HTMLElement, sowie von Element und Node.

HTMLSelectElement.add()

Fügt ein Element zur Sammlung der option Elemente für dieses select Element hinzu.

HTMLSelectElement.checkValidity()

Prüft, ob das Element irgendwelche Einschränkungen hat und ob es diese erfüllt. Wenn das Element seine Einschränkungen nicht erfüllt, löst der Browser ein abbrechbares invalid Ereignis am Element aus (und gibt false zurück).

HTMLSelectElement.item()

Ruft einen Artikel aus der Optionen-Sammlung für dieses <select> Element ab. Sie können auch auf einen Artikel zugreifen, indem Sie den Index in eckigen Klammern oder Klammern angeben, ohne diese Methode explizit aufzurufen.

HTMLSelectElement.namedItem()

Ruft den Artikel in der Optionen-Sammlung mit dem angegebenen Namen ab. Der Name-String kann entweder der id oder das name Attribut eines Options-Knotens entsprechen. Sie können auch auf einen Artikel zugreifen, indem Sie den Namen in eckigen Klammern oder Klammern angeben, ohne diese Methode explizit aufzurufen.

HTMLSelectElement.remove()

Entfernt das Element am angegebenen Index aus der Optionen-Sammlung für dieses select Element.

HTMLSelectElement.reportValidity()

Diese Methode meldet dem Benutzer die Probleme mit den Einschränkungen auf dem Element, falls vorhanden. Wenn es Probleme gibt, löst es ein abbrechbares invalid Ereignis am Element aus und gibt false zurück; wenn keine Probleme vorliegen, gibt es true zurück.

HTMLSelectElement.setCustomValidity()

Setzt die individuelle Validierungsnachricht für das Auswahl-Element auf die angegebene Nachricht. Verwenden Sie den leeren String, um anzuzeigen, dass das Element keinen individuellen Validierungsfehler hat.

showPicker()

Zeigt den Options-Auswähler an.

Ereignisse

Dieses Interface erbt die Ereignisse von HTMLElement, sowie von Element und Node.

Hören Sie auf diese Ereignisse mit addEventListener() oder indem Sie einen Ereignis-Listener der oneventname Eigenschaft dieses Interfaces zuweisen:

change Ereignis

Wird ausgelöst, wenn der Benutzer eine Option auswählt.

input Ereignis

Wird ausgelöst, wenn der value eines <input>, <select>, oder <textarea> Elements geändert wurde.

Beispiel

Informationen über die ausgewählte Option abrufen

js
/* assuming we have the following HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

const select = document.getElementById("s");

// return the index of the selected option
console.log(select.selectedIndex); // 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value); // Second

Eine bessere Möglichkeit, Änderungen an der Auswahl des Benutzers zu verfolgen, besteht darin, auf das change Ereignis zu achten, das auf dem <select> auftritt. Dies wird Ihnen mitteilen, wann sich der Wert ändert, und Sie können dann alles aktualisieren, was Sie benötigen. Siehe das bereitgestellte Beispiel in der Dokumentation für das change-Ereignis für Details.

Spezifikationen

Specification
HTML Standard
# htmlselectelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Das <select> HTML-Element, das dieses Interface implementiert.