TechCodeview

In diesem Artikel erfahren Sie, wie Sie mithilfe von jQuery ausgewählte Werte in der Dropdown-Liste abrufen. Zunächst werden wir diesen Artikel mit jQuery, dem jQuery-Selektor und der jQuery-Methode val() verstehen. Anschließend werden wir dieses Thema anhand verschiedener Beispiele verstehen.

Was meinst du mit jQuery?

jQuery ist eine schnelle, leichte, kleine und funktionsreiche JavaScript-Bibliothek.

Verwenden Sie die jQuery: Ausgewählter Selektor in Kombination mit der val()-Methode, um den ausgewählten Optionswert in einer Dropdown-Liste zu finden.

Der Selektor in jQuery:

Es handelt sich um ein HTML-Element, in dem die Deklaration angewendet wird.

Zum Beispiel: ausgewählt, geprüft usw.

„Ausgewählt“ wird verwendet, um die Standardauswahl anzugeben, wenn das Formular zum ersten Mal geladen wird.

val()-Methode in jQuery:

Diese Methode wird verwendet, um die Werte von Formularelementen abzurufen oder den Wert des Attributs festzulegen, das für die ausgewählten Elemente verwendet wird.

Syntax:

 $(selector).val (); 

Beispiel:

 $('input: text').val ('javaTpoint!'); 

Dropdown-Liste mit und Tag.

Die Tags „select“ und „option“ werden zum Erstellen von Dropdown-Menüs verwendet. Sie ermöglichen dem Benutzer die Auswahl einzelner oder mehrerer Optionen aus einer Liste von Optionen. Nicht alle Auswahlmöglichkeiten werden auf dem Bildschirm angezeigt, sie sind jedoch sichtbar, wenn Sie die Dropdown-Liste aufrufen. Sie werden verwendet, um Platz zu sparen, da nur ein Element der Liste angezeigt wird.

Zum Erstellen von Pulldown-Listen wird tag anstelle von tag verwendet. Das gepaarte Tag beginnt mit dem öffnenden Tag und endet mit dem schließenden Tag. Dieses Tag muss mit dem Tag verwendet werden.

Syntax:

 Text Label-1 Text Label-2 ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. 

Die verschiedenen mit dem Tag verwendeten Attribute sind:

Mehrere:Es wird verwendet, um das Tag so einzustellen, dass es zahlreiche Optionen akzeptiert. Standardmäßig kann eine einzelne vom Benutzer ausgewählte Option verwendet werden. Um mehrere Optionen auszuwählen, muss ein Benutzer beim Klicken auf die Option auf „Klicken“ klicken.Name:Es wird verwendet, um einen Namen für die Pulldown-Liste anzugeben.

Die verschiedenen mit dem Tag verwendeten Attribute sind:

Wert:Es wird verwendet, um den Wert anzugeben, der beim Absenden des Formulars gesendet wird. Wenn das Wertattribut im Tag weggelassen wird, wird der Titelinhalt verwendet.Ausgewählt:Es wird verwendet, um die vorab ausgewählte Auswahl anzugeben, wenn das Formular zum ersten Mal in einen Browser geladen wird.

Die folgenden Beispiele werden verwendet, um den ausgewählten Wert aus der Dropdown-Liste in jQuery abzurufen.

Beispiel 1:

So erhalten Sie den ausgewählten Wert aus der Dropdown-Liste in jQuery.

 Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $(&apos;select.country&apos;).change (function () { var selectedCountry = $(this).children(&apos;option:selected&apos;).val(); alert (&apos;You have selected the country - &apos; + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Erläuterung:

Im obigen Beispiel haben wir mit Hilfe des Tags und eine Dropdown-Liste erstellt. Wenn wir in diesem Fall einen Mehrfachwert aus der Liste auswählen und einen erstellen Nachdem wir das Mehrfachelement aus der Liste ausgewählt und auf eine Schaltfläche geklickt haben, wird eine Warnmeldung mit dem ausgewählten Element aus der Dropdown-Liste angezeigt.

 United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Hier,

Size ='3' wird verwendet, um die Anzahl der in der Dropdown-Liste angezeigten Elemente anzuzeigen, multiple wird verwendet, um mehrere Werte aus der Dropdown-Liste auszuwählen.

Ausgabe:

xd xd Bedeutung

Die Ausgabe dieses Beispiels ist unten angegeben.