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.
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 esnull
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 diesemselect
-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 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 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 diesesselect
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 gibtfalse
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 dasname
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 gibtfalse
zurück; wenn keine Probleme vorliegen, gibt estrue
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
/* 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.