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.
* Some parts of this feature may have varying levels of support.
Die HTMLSelectElement
Schnittstelle repräsentiert ein <select>
HTML-Element. Diese Elemente teilen auch alle Eigenschaften und Methoden anderer HTML-Elemente über die HTMLElement
Schnittstelle.
Instanzeigenschaften
Diese Schnittstelle erbt die Eigenschaften von HTMLElement
sowie von Element
und Node
.
HTMLSelectElement.autocomplete
-
Ein Zeichenfolgenwert, der das
autocomplete
widerspiegelt und angibt, ob der Wert des Steuerelements vom Browser automatisch vervollständigt werden kann. HTMLSelectElement.disabled
-
Ein boolescher Wert, der das
disabled
HTML-Attribut widerspiegelt, das angibt, ob das Steuerelement deaktiviert ist. Wenn es deaktiviert ist, akzeptiert es keine Klicks. HTMLSelectElement.form
Schreibgeschützt-
Ein
HTMLFormElement
, das das Formular referenziert, mit dem dieses Element verbunden ist. Wenn das Element nicht mit einem<form>
Element verbunden ist, gibt esnull
zurück. HTMLSelectElement.labels
Schreibgeschützt-
Eine
NodeList
von<label>
Elementen, die mit dem Element assoziiert sind. HTMLSelectElement.length
-
Eine
unsigned long
Angabe der Anzahl der<option>
Elemente in diesemselect
Element. HTMLSelectElement.multiple
-
Ein boolescher Wert, der das
multiple
HTML-Attribut widerspiegelt, das angibt, ob mehrere Elemente ausgewählt werden können. HTMLSelectElement.name
-
Eine Zeichenfolge, die das
name
HTML-Attribut widerspiegelt und den Namen dieses Steuerelements enthält, der von Servern und DOM-Suchfunktionen verwendet wird. HTMLSelectElement.options
Schreibgeschützt-
Eine
HTMLOptionsCollection
, die die Menge der<option>
(HTMLOptionElement
) Elemente repräsentiert, die dieses Element enthält. HTMLSelectElement.required
-
Ein boolescher Wert, der das
required
HTML-Attribut widerspiegelt, das angibt, ob der Benutzer vor dem Absenden des Formulars einen Wert auswählen muss. HTMLSelectElement.selectedIndex
-
Ein
long
, der den Index des ersten ausgewählten<option>
Elements widerspiegelt. Der Wert-1
gibt an, dass kein Element ausgewählt ist. HTMLSelectElement.selectedOptions
Schreibgeschützt-
Eine
HTMLCollection
, die die Menge der<option>
Elemente repräsentiert, die ausgewählt sind. HTMLSelectElement.size
-
Ein
long
, der dassize
HTML-Attribut widerspiegelt und die Anzahl der sichtbaren Elemente im Steuerelement enthält. Der Standardwert ist 1, es sei denn,multiple
isttrue
, in diesem Fall ist es 4. HTMLSelectElement.type
Schreibgeschützt-
Eine Zeichenfolge, die den Typ des Formularsteuerelements repräsentiert. Wenn
multiple
true
ist, gibt es"select-multiple"
zurück; andernfalls"select-one"
. HTMLSelectElement.validationMessage
Schreibgeschützt-
Eine Zeichenfolge, die eine lokalisierte Nachricht darstellt, die die Validierungseinschränkungen beschreibt, die das Steuerelement nicht erfüllt (falls vorhanden). Dieses Attribut ist der leere String, wenn das Steuerelement kein Kandidat für die Constraint-Validierung ist (
willValidate
ist false) oder es seine Einschränkungen erfüllt. HTMLSelectElement.validity
Schreibgeschützt-
Ein
ValidityState
, der den Gültigkeitsstatus wiedergibt, in dem sich dieses Steuerelement befindet. HTMLSelectElement.value
-
Eine Zeichenfolge, die den Wert des Formularsteuerelements widerspiegelt. Gibt die
value
Eigenschaft des ersten ausgewählten Options-Elements zurück, falls vorhanden, ansonsten die leere Zeichenfolge. HTMLSelectElement.willValidate
Schreibgeschützt-
Ein boolescher Wert, der angibt, ob der Button ein Kandidat für die Constraint-Validierung ist. Es ist
false
, wenn Bedingungen es von der Constraint-Validierung ausschließen.
Instanzmethoden
Diese Schnittstelle erbt die Methoden von HTMLElement
sowie von Element
und Node
.
HTMLSelectElement.add()
-
Fügt ein Element zur Sammlung der
option
Elemente für diesesselect
Element hinzu. HTMLSelectElement.checkValidity()
-
Überprü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 abbruchfähiges
invalid
Ereignis an dem Element aus (und gibtfalse
zurück). HTMLSelectElement.item()
-
Ruft ein Element aus der Optionssammlung für dieses
<select>
Element ab. Sie können auch auf ein Element zugreifen, indem Sie den Index in eckigen Klammern oder Klammern angeben, ohne diese Methode explizit aufzurufen. HTMLSelectElement.namedItem()
-
Ruft das Element in der Optionssammlung mit dem angegebenen Namen ab. Der Namensstring kann entweder der
id
oder demname
Attribut eines Optionsknotens entsprechen. Sie können auch auf ein Element zugreifen, indem Sie den Namen in eckigen Klammern oder Klammern angeben, ohne diese Methode explizit aufzurufen. HTMLSelectElement.remove()
-
Entfernt das Element an dem angegebenen Index aus der Optionssammlung für dieses
select
Element. HTMLSelectElement.reportValidity()
-
Diese Methode berichtet dem Benutzer über Probleme mit den Einschränkungen des Elements, falls vorhanden. Wenn es Probleme gibt, löst sie ein abbruchfähiges
invalid
Ereignis an dem Element aus und gibtfalse
zurück; wenn es keine Probleme gibt, gibt sietrue
zurück. HTMLSelectElement.setCustomValidity()
-
Setzt die benutzerdefinierte Fehlermeldung für das Auswahl-Element auf die angegebene Nachricht. Verwenden Sie den leeren String, um anzugeben, dass das Element keinen benutzerdefinierten Validierungsfehler hat.
showPicker()
-
Zeigt den Optionsauswahlpicker.
Ereignisse
Diese Schnittstelle erbt die Ereignisse von HTMLElement
sowie von Element
und Node
.
Hören Sie auf diese Ereignisse mit addEventListener()
oder indem Sie einen Ereignis-Listener für die oneventname
Eigenschaft dieser Schnittstelle zuweisen:
change
Ereignis-
Wird ausgelöst, wenn der Benutzer eine Option auswählt.
input
Ereignis-
Wird ausgelöst, wenn sich der
value
eines<input>
,<select>
oder<textarea>
Elements geändert hat.
Beispiel
Informationen über die ausgewählte Option abrufen
/* 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 am <select>
zu achten. Das wird Ihnen mitteilen, wann sich der Wert ändert, und Sie können dann alles Notwendige aktualisieren. Siehe das bereitgestellte Beispiel in der Dokumentation für das change
Ereignis für weitere Details.
Spezifikationen
Specification |
---|
HTML # htmlselectelement |
Browser-Kompatibilität
Siehe auch
- Das
<select>
HTML-Element, das diese Schnittstelle implementiert.