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.

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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 Schreibgeschützt

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
# htmlselectelement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLSelectElement
add
Index as before parameter
autocomplete
checkValidity
disabled
form
item
labels
length
multiple
name
namedItem
options
remove
reportValidity
required
selectedIndex
selectedOptions
setCustomValidity
showPicker
size
type
validationMessage
validity
value
willValidate

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch

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