Wählen Sie die erste Option des Dropdown-Menüs mit jQuery

  2. How-To's
  3. jQuery-Anleitungen
  4. Wählen Sie die erste Option des …
Neha Imran 21 Juni 2023
jQuery jQuery Dropdown
  1. Wählen Sie die erste Option des <Select>-Tags mit jQuery
  2. Verwenden Sie die Eigenschaft SelectedIndex
  3. Verwenden Sie die val()-Methode
  4. Verwenden Sie die prop()-Methode
  5. Verwenden Sie die attr()-Methode
Wählen Sie die erste Option des Dropdown-Menüs mit jQuery

In diesem Tutorial wird jQuery verwendet, um die erste Option des select-Tags auszuwählen. Wir werden uns verschiedene jQuery-Implementierungsstrategien ansehen, die uns dabei helfen, die gewünschte Funktionalität zu implementieren.

Wählen Sie die erste Option des <Select>-Tags mit jQuery

Dropdown-Menüs und Listen sind auf unseren Webseiten sehr vertraut und praktisch. Es kann helfen, die Filter auf unserer Website anzuzeigen, oder wir können es verwenden, um ein Dropdown-Menü in der Navigationsleiste zu erstellen, das viele Seiten aus denselben Kategorien an einem Ort anzeigt.

Unabhängig davon, wie wir es auf unseren Websites verwenden, gibt es Zeiten, in denen wir eine bestimmte Option vorab auswählen möchten, und darauf konzentriert sich der heutige Artikel. Wir werden über die Verwendung von jQuery sprechen, um diese Funktion zu implementieren.

jQuery ist eine leichtgewichtige JavaScript-Bibliothek, die erstellt wurde, um die Verwendung von JavaScript auf Ihren Webseiten zu vereinfachen. Wir werden die folgenden vier Methoden zur Auswahl der ersten Option des <select>-Tags mit jQuery besprechen.

  1. Eigenschaft SelectedIndex
  2. Methode .val()
  3. Methode .prop()
  4. .attr-Methode

Verwenden Sie die Eigenschaft SelectedIndex

Der Index der ausgewählten Option wird von der HTML-DOM-Eigenschaft selectedIndex gesetzt oder in einer Dropdown-Liste zurückgegeben. Der Index beginnt bei Null.

Um alle Optionen abzuwählen, geben Sie einen Wert von -1 ein. Wenn der Benutzer keine Optionen auswählt, gibt die Eigenschaft selectedIndex -1 zurück.

Syntax:

  1. Es wird die Eigenschaft s selectedIndex zurückgegeben.

    selectObject.ausgewählterIndex

  2. Es wird die Eigenschaft s selectedIndex setzen.

    selectObject.s selectedIndex = Zahl

Sehen Sie sich das Beispiel unten an, um die Funktionsweise dieser Eigenschaft zu verstehen.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down')[0].selectedIndex = 0;
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Ausgang:

ausgewähltIndex

Mal sehen, was wir im Code gemacht haben. Wir müssen das Tag <select> auswählen, um die erste Option auszuwählen.

Also wählen wir zuerst das Element mit der id aus. Sie finden es vielleicht verwirrend, dass wir hinter dem jQuery-Selektor [0] setzen.

Um Ihnen dabei zu helfen, dies zu verstehen, lassen Sie uns eine ausführliche Erklärung geben.

Wenn wir den jQuery-Selektor verwenden, um ein bestimmtes Element auszuwählen, erhalten wir ein Array der ausgewählten Elemente. Da wir ID verwenden, gibt es nur ein Element im Array, das am Index 0 sein muss.

Aus diesem Grund schreiben wir [0], um den ersten Index des zurückgegebenen Arrays auszuwählen.

Wenn das gewünschte Element ausgewählt ist, rufen wir die Eigenschaft selectedIndex darauf auf und weisen ihm den Wert 0 zu, was bedeutet, dass es die erste Option wählt.

Wir setzen 0 und nicht 1, weil wir mit Indizes arbeiten, und Indizes beginnen bei 0, also bedeutet 0 den ersten Wert, 1 den zweiten Wert und so weiter.

Verwenden Sie die val()-Methode

Die Methode val() implementiert Aktionen auf den Werten von HTML-Elementen. Mit dieser Methode kann der Wert eines bestimmten Elements gesetzt oder abgerufen werden.

Die Methode val() kann nur auf HTML-Elemente mit einer Eigenschaft value angewendet werden.

Syntax:

  1. Es wird der Wert des ausgewählten Elements zurückgegeben.

    $(Selektor).val()

  2. Es wird den Wert des ausgewählten Elements auf den von uns angegebenen Wert setzen.

    $(Selektor).Wert(Wert)

  3. Dies verwendet eine Funktion, um den Wert des ausgewählten Elements festzulegen. Falls angegeben, gibt der aktuelle Wert den Wert des Elements und der index-Parameter den Index des Elements zurück.

    $(Selektor).val(Funktion(Index, aktueller Wert))

Wir werden die Methode val() verwenden, um das erste Element aus einer Dropdown-Liste auszuwählen. Sehen Sie sich unten zwei Strategien an, die uns helfen können, diese Funktionalität zu erreichen.

Szenario 1

Wir können die oben besprochene Syntax verwenden, um die erste oder eine beliebige Option aus der Dropdown-Liste auszuwählen. Wir wissen, dass $(selector).val(value) verwendet wird, um den Wert des ausgewählten Elements festzulegen, und wir verstehen auch, dass diese Methode mit dem Attribut value funktioniert.

Legen Sie also zuerst den Wert jedes option-Tags im select-Element fest, und dann wählen wir unsere gewünschte Option mit der val()-Methode aus.

Wählen wir jetzt die zweite Option. Überprüfen Sie den folgenden Code.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#drop_down').val("2");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2">Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

Ausgang:

Wertmethode 1

Das ist ganz einfach. Wir haben die Funktion val() mit dem Argumentwert 2 aufgerufen, nachdem wir den Wert auf die Tags option im Feld value gesetzt hatten.

Szenario 2

Eine andere Methode zur Auswahl der ersten Option ist die Verwendung der Methode .first() von jQuery, die das erste Element des ausgewählten Tags zurückgibt. Beachten Sie den folgenden Code, um ihn besser zu verstehen.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down").val($("#drop_down option").first().val());
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option value="1">Value1</option>
            <option value="2"selected>Value2</option>
            <option value="3">Value3</option>
        </select>
    </body>
</html>

Ausgang:

Wertmethode 2

Um Ihnen zu helfen, diesen Ansatz zu verstehen, wählen wir die zweite Option als standardmäßig ausgewählte Option aus, indem wir ausgewählt in das Tag schreiben, und wenn jQuery nicht verwendet wird, wird die zweite Option als ausgewählte Option angezeigt.

Wir haben unserem Code jedoch jQuery hinzugefügt und die Methode .first() für das Tag option des ausgewählten Elements verwendet. Es zeigt die erste Option als die ausgewählte an, wie in der Ausgabe zu sehen ist.

In den älteren Versionen von jQuery hatten wir diese .first()-Methode als Pseudoselektor und um sie zu verwenden, schreiben wir $("#drop_down").val($("#drop_down option:first").val()), aber dies ist in den neuesten Versionen veraltet und es wird nicht empfohlen, es auf diese Weise zu verwenden.

Verwenden Sie die prop()-Methode

Eigenschaften und Werte der ausgewählten Elemente werden von der Funktion prop() gesetzt oder zurückgegeben. Da wir mit dieser Funktion auf die Eigenschaften zugreifen können, können wir einfach die erste Option der Dropdown-Liste auswählen.

Lassen Sie uns zwei Methoden zum Implementieren unserer erforderlichen Funktionalität mit dieser Methode besprechen.

Szenario 1

Wir wissen, dass wir mit der Methode prop() auf die Eigenschaften des Elements zugreifen können. Der erste Ansatz, den wir in diesem Artikel zur Auswahl der erforderlichen Option besprochen haben, ist die Verwendung der Eigenschaft s selectedIndex .

Wir können auf diese Eigenschaft auch mit der Methode prop() zugreifen. Hier ist wie.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down").prop("selectedIndex", 1)
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Ausgang:

Prop-Methode

Der Code ist ziemlich einfach und leicht zu verstehen. Wir haben der Methode prop() gesagt, dass sie Index 1 auswählen soll, was anzeigt, dass Option zwei gewählt wird.

Szenario 2

Der Zugriff auf die Eigenschaft ausgewählt des Tags option ist eine weitere Methode, um die gewünschte Option aus der Dropdown-Liste mit der Methode prop() auszuwählen. Wir möchten häufig, dass eine bestimmte Option standardmäßig ausgewählt wird, also fügen wir dem Tag das Attribut ausgewählt hinzu, das anzeigt, dass die Option ausgewählt ist.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#drop_down option").first().prop("selected", "true");
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Verwenden Sie die attr()-Methode

Die Methode attr() zielt darauf ab, die Werte und Attribute der ausgewählten Elemente zu setzen oder zurückzugeben. Mit dieser Methode können wir ganz einfach unsere gewünschte Option aus der Liste auswählen.

Schauen Sie sich die beiden unten aufgeführten Strategien an.

Szenario 1

Lassen Sie uns über eine bestimmte Situation sprechen, in der wir die erste nicht deaktivierte Option auswählen und die deaktivierten Optionen ignorieren möchten, selbst wenn sie die ersten sind. Untersuchen Sie den folgenden Code, um zu erfahren, wie die erforderliche Funktionalität implementiert wird.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $("#drop_down option:not([disabled])").first().attr('selected','selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down" style="width:150px">
            <option selected disabled>Choose the Option</option>
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Lassen Sie uns zunächst sehen, wie die Ausgabe aussehen wird, wenn wir diese Methode nicht verwenden.

vor jQuery

Die ausgewählte Option ist die erste. Obwohl es deaktiviert ist, können wir das Attribut ausgewählt dennoch so einstellen, dass diese Option als ausgewählt angezeigt wird.

Lassen Sie uns nun sehen, welche Option mit unserem oben geschriebenen Code ausgewählt wird.

nach jQuery

Erstaunlich, oder? Das erste nicht deaktivierte Element, das verfügbar ist, wird ausgewählt und der Wert seines Attributs ausgewählt wird gesetzt.

Szenario 2

Ein weiteres faszinierendes Szenario ist, wenn wir alle ausgewählten option-Tags entfernen möchten, bevor wir unsere gewünschte Option auswählen. Dies kann mit einigen der jQuery-Methoden schnell erledigt werden.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
               $('#drop_down').removeAttr('selected').find('option:first').attr('selected', 'selected');
            });
        </script>
    </head>
    <body>
        <select id="drop_down">
            <option>Value1</option>
            <option>Value2</option>
            <option>Value3</option>
        </select>
    </body>
</html>

Zuerst haben wir die Methode removeAttr() aufgerufen, die jede ausgewählte Option entfernt. Dann haben wir mit der Methode find() nach der ersten Option gesucht und dann den Wert ihres Attributs ausgewählt gesetzt.

Eine wichtige Sache hier ist, dass wir first() als Pseudoselektor in unserem Code verwendet haben, und wir haben bereits besprochen, dass dies jetzt veraltet ist. Wenn Ihr Browser dies also nicht unterstützt, können Sie es wie folgt schreiben: $('#drop_down').removeAttr('ausgewählt').find('option').first().attr('ausgewählt', 'ausgewählt' ).

Verwandter Artikel - jQuery Dropdown