JavaScript wählen Sie das Element

Zusammenfassung: in diesem tutorial lernen Sie, wie man mit den <select> – element in JavaScript.

Einführung in die HTML Select-Elemente

A <select> Element bietet Ihnen eine Liste von Optionen. Sie können eine oder mehrere Optionen auswählen.

Um ein <select> – Element zu bilden, verwenden Sie die Elemente <select> und <option>., Beispiel:

Mit dem obigen<select> – Element können Sie jeweils eine einzelne Option auswählen.

Wenn Sie mehrere Auswahlen wünschen, können Sie multiple Attribut zu <select> Element wie folgt hinzufügen:

Der HTMLSelectElement Typ

Um mit <select> Element in JavaScript zu interagieren, verwenden Sie die HTMLSelectElement Typ.,

Der Typ HTMLSelectElement hat die folgenden nützlichen Eigenschaften:

selectedIndex – gibt den nullbasierten Index der ausgewählten Option zurück. Die selectedIndex ist -1 wenn keine Option ausgewählt ist. Wenn das<select> – Element mehrere Auswahlen zulässt, gibt dieselectedIndex dievalue der ersten Option zurück.,
value – gibt die Eigenschaft value des ersten ausgewählten Optionselements zurück, falls vorhanden, andernfalls wird eine leere Zeichenfolge zurückgegeben.
multiple zurück true wenn die <select> – element ermöglicht die Auswahl mehrerer Elemente. Es entspricht dem Attribut multiple.

Die SelectedIndex-Eigenschaft

Um ein <select> – Element auszuwählen, verwenden Sie die DOM-API wie getElementById() oder querySelector().,

Das folgende Beispiel veranschaulicht, wie der Index der ausgewählten Option abgerufen wird:

Wie es funktioniert:

Wählen Sie zunächst die<button> und<select> Elemente mit derquerySelector() – Methode aus.
Fügen Sie dann einen Klickereignis-Listener an die Schaltfläche an und zeigen Sie den ausgewählten Index mithilfe der Methode alert() an, wenn auf die Schaltfläche geklickt wird.,

Der wert eigenschaft

Die value eigenschaft der <select> element hängt von der <option> element und seine HTML multiple attribut:

Wenn keine option ausgewählt ist, die value Eigenschaft des Auswahlfelds ist eine leere Zeichenfolge.
Wenn eine Option ausgewählt ist und ein value Attribut hat, ist die value Eigenschaft des Auswahlfelds der Wert der ausgewählten Option.,
Wenn eine Option ausgewählt ist und kein value Attribut hat, ist die value Eigenschaft des Auswahlfelds der Text der ausgewählten Option.
Wenn mehrere Optionen ausgewählt sind, wird dievalue – Eigenschaft des Auswahlfelds basierend auf den beiden vorherigen Regeln von der ersten ausgewählten Option abgeleitet.

Siehe folgendes Beispiel:

In diesem Beispiel:

Wenn Sie die erste Option auswählen, ist die value Eigenschaft der <select> leer.,
Wenn Sie die letzte Option auswählen, ist die value Eigenschaft des Auswahlfelds Ember.js da die ausgewählte Option kein value Attribut hat.
Wenn Sie die zweite oder dritte Option auswählen, lautet die value Eigenschaft "1"oder "2".

Der HTMLOptionElement-Typ

In JavaScript repräsentiert der Typ HTMLOptionElement das Element <option>.,

Der Typ HTMLOptionElement hat die folgenden praktischen Eigenschaften:

index – der Index der Option in der Sammlung von Optionen.
selected – gibt true zurück, wenn die Option ausgewählt ist. Sie setzen diese Eigenschaft auf true, um eine Option auszuwählen.
text – gibt den text der option.
value – gibt das HTML-Attribut „value“.,08″>

Dann können Sie die text und value der ausgewählten Option über text und value Eigenschaften zugreifen:


Code language: JavaScript (javascript)

Wenn eine <select> Element erlaubt Mehrfachauswahl, Sie können die selected Eigenschaft verwenden, um zu bestimmen, welche Optionen ausgewählt sind:

In diesem Beispiel ist die sb.options ein Array-ähnliches Objekt, so dass es nicht die filter() Methoden wie eine Array Objekt.,

Um diese Methoden aus dem Array – Objekt auszuleihen, verwenden Sie die call() – Methode. Beispielsweise gibt das folgende Array ausgewählter Optionen zurück:


Code language: PHP (php)

Und um die Eigenschaft text der Optionen zu erhalten, verketten Sie das Ergebnis der Methode filter() mit der Methode map() wie folgt:


Code language: JavaScript (javascript)

Zusammenfassung

Mit dem Element <select> können Sie eine oder mehrere Optionen auswählen., Fügen Sie das Attribut multiple zum Element <select> hinzu, um mehrere Auswahlen zu aktivieren.
Die HTMLSelectElement repräsentiert das <select> Element. Verwenden Sie die selectedIndex und value, um den index und den Wert der ausgewählten option.
Die HTMLOptionElement repräsentiert das<option> Element. Wenn die Option ausgewählt ist, ist die Eigenschaft selected true., Die Eigenschaften selectedText und selectedValue geben die text und value der ausgewählten Option zurück.

War dieses tutorial hilfreich ?
YesNo