SelectedIndex -Eigenschaft in JavaScript

Während der Entwicklung einer Website kann es eine Situation geben, in der Sie den Index der ausgewählten Option aus dem hinzugefügten Dropdown-Menü erhalten müssen. Haben Sie keine Ahnung, wie das geht?? Kein Problem! Um eine solche Situation zu bewältigen, bietet JavaScript ein Attribut namens ““SelectedIndexDas wird verwendet, um den Index der ausgewählten Option aus der Dropdown-Liste zu erhalten.

In diesem Tutorial wird die SelectedIndex -Eigenschaft und ihre Verwendung in JavaScript erläutert.

Was wird ausgewählt, in JavaScript ausgewählt?

Der "SelectedIndexIst die JavaScript-Eigenschaft, die zum Einstellen oder Rückgabe des Index der ausgewählten Option in der hinzugefügten Dropdown-Liste verwendet wird. Es gibt eine Nummer aus, die den Index der Option im Dropdown-Menü HTML ausgewählt hat. Insbesondere beginnt der Index der Dropdown -Liste bei Null und gibt -1 zurück, wenn keine Option ausgewählt wird.

Syntax

Befolgen Sie die untergegebene Syntax, um die Eigenschaft aus SelectedIndex zu verwenden:

selectObject.SelectedIndex

Hier, "selectObjectIst die Option, die aus dem Dropdown-Menü ausgewählt wird, und die SelectedIndex-Eigenschaft holt ihren Index ab.

Beispiel 1: Erhalten Sie den Index der ausgewählten Option mithilfe der SelectedIndex -Eigenschaft mit addEventListener () -Methode

Zunächst erstellen wir eine Dropdown-Liste mit der “Tag und geben Sie die Option mit der “an" Stichworte. Fügen Sie dann eine Beschriftung hinzu, die den Index der ausgewählten Option anzeigt:

Wählen Sie die Option aus und erhalten Sie den Index der ausgewählten Option

C
C++
HTML
CSS
Python
Java
JavaScript

In einer JavaScript-Datei erhalten wir zunächst die Dropdown-Liste und das Etikettelement, indem wir ihre jeweiligen IDs übergebenwählen" Und "Index”Im Dokument.GetElementById () -Methode. Dann rufen Sie die “auf"AddEventListener ()Methode und übergeben die “ändernEreignis und die Funktion als Argumente. Dies funktioniert so, dass bei Auswahl einer Option des Dropdown-Menüs sein Index als Inhalt der hinzugefügten Etikett angezeigt wird:

const selectoption = dokument.getElementById ('select');
const optionIndex = dokument.getElementById ('Index');
wähle eine Option.AddEventListener ('Change', () =>
const index = selectoption.selectedIndex;
OptionIndex.textContent = 'Der Index der ausgewählten Option ist: $ index';
);

Es ist ersichtlich, dass der Index gegen die ausgewählte Option erfolgreich angezeigt wird:

Beispiel 2: Erhalten Sie den Index der ausgewählten Option mithilfe der SelectedIndex -Eigenschaft mit einem Onclick -Ereignis

Hier erstellen wir zwei Schaltflächen, eine für die Deaktivierung der Optionen und die andere zum Anzeigen des Index, der das auslöstAbwählen()", und das "GetIndexofSelectedoption ()”Funktionen jeweils:

Index zeigen
Abwählen

Definieren Sie in der JavaScript -Datei zunächst die “GetIndexofSelectedoption ()Funktionen, die den Index gegen die ausgewählte Option drucken, indem es das Dropdown-Listelement mit seinem Dokument abholt.GetElementById () -Methode und dann auf den Index der ausgewählten Option zugreifen, indem Sie die “mit der“ zugreifenSelectedIndex" Eigentum:

Funktion getIndexofSelectedoption ()
var selectoption = dokument.getElementById ('select').selectedIndex;
var optionIndex = Dokument.getElementById ("Index");
OptionIndex.textContent = 'Der Index der ausgewählten Option lautet: $ selectoption';

In der Funktion DeSelect () setzen wir den Wert fest “-1”Vom Dropdown-Menü. Infolgedessen wird die Option abgewählt:

Funktion DeSelect ()
dokumentieren.getElementById ("select").selectedIndex = "-1";

Klicken Sie auf die “Index zeigen”Die Schaltfläche zeigt den Index der ausgewählten Option an. Im Gegensatz dazu die “AbwählenDie Schaltfläche wird die ausgewählte Option deaktivieren:

Wir haben alle Details im Zusammenhang mit der Eigenschaft JavaScript SelectedIndex behandelt.

Abschluss

Der "SelectedIndexDie Eigenschaft wird verwendet, um den Index der ausgewählten Option in einer HTML-Drop-List zu bestimmen, die mit dem Tag mit Tag mit Tag erstellt wurde. Es gibt eine Zahl als Ausgabe, die den Index der Option im Dropdown-Menü darstellt. Insbesondere beginnt der Index der Dropdown -Liste bei Null und gibt -1 zurück, wenn keine Option ausgewählt wird. In diesem Tutorial haben wir die JavaScript SelectedIndex -Eigenschaft besprochen.