So erhalten Sie den ausgewählten Dropdown-Wert beim Änderungsereignis mit jQuery

Mit einem jQuery-Change-Handler können Sie Code ausführen, nachdem sich eine Dropdown-Auswahl geändert hat. Lesen Sie innerhalb des Handlers die ausgewählte Option mit this.value aus und verwenden Sie diesen Wert dann, um die Seite zu aktualisieren oder eine andere Aktion auszuführen. Die folgenden Beispiele ordnen jede Option einer Hintergrundfarbe zu.

Verwenden Sie die Methode change(), um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen

In jQuery ist change der Ereignisname. change() ist die Kurzhandmethode: Übergeben Sie einen Handler, um Code zu binden, der auf das Ereignis reagiert. Der Aufruf von .change() ohne Handler löst stattdessen das Ereignis aus; er registriert keinen Handler. Bei einem Dropdown wird der Handler ausgeführt, wenn der Benutzer eine andere Option auswählt.

Dies ist ein Beispiel für eine Browserseite; es wird nicht ausgeführt präsentiert, sein Verhalten wird also beschrieben, anstatt aus einer Ausführung beobachtet zu werden. Die vollständige Seite lädt jQuery vor dem Code, der es verwendet. Die value-Attribute des Auswahlfelds sind die Werte, die der Handler liest. Die anfängliche Option hat den Wert 0, und die if/else-Zweige ordnen 0 bis 3 den vier CSS-Farbnamen zu. Der Wert der ausgewählten Option ist eine Zeichenkette, daher verwenden die Vergleiche in Anführungszeichen gesetzte Werte. Das Ändern der Auswahl aktualisiert die Hintergrundfarbe des #Main-Divs, während sein Text und Rahmen unverändert bleiben.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dropdown change with jQuery change()</title>
    <style>
        #Main {
            border: 5px solid green;
            background-color: lightblue;
            min-height: 100px;
            padding: 1rem;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#bgcolor").change(function () {
                var bgcolor = this.value;

                if (bgcolor === "0") {
                    $("#Main").css("background-color", "lightblue");
                } else if (bgcolor === "1") {
                    $("#Main").css("background-color", "lightgreen");
                } else if (bgcolor === "2") {
                    $("#Main").css("background-color", "lightpink");
                } else {
                    $("#Main").css("background-color", "lightgrey");
                }
            });
        });
    </script>
</head>
<body>
    <div id="Main">
        <h1>Delftstack.com</h1>
        <label for="bgcolor">Background color:</label>
        <select name="bgcolor" id="bgcolor">
            <option value="0">Blue</option>
            <option value="1">Green</option>
            <option value="2">Pink</option>
            <option value="3">Grey</option>
        </select>
    </div>
</body>
</html>

Die erste Option ist ausgewählt, wenn die Seite lädt, daher beginnt das Panel in Hellblau. Jede spätere Auswahl ruft den gebundenen Handler auf und wendet die passende Farbe an. Ersetzen Sie die Farbzuweisungen durch die Aktion, die Ihre Seite benötigt, etwa das Aktualisieren einer Nachricht oder das Filtern angezeigter Ergebnisse. Lassen Sie den Handler an dem Auswahlfeld angebracht, dessen Wert Sie lesen möchten.

Verwenden Sie die Methode on(), um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen

Sie können denselben Handler mit on() binden, indem Sie den Ereignisnamen und einen Callback übergeben: $(selector).on('change', handler). Hier ist change der Ereignisname und die Funktion der Handler. Der Selektor identifiziert das Element, das den Handler erhält. Die Argumente für Kind-Selektor, Daten und Ereignis-Map werden für dieses direkte Dropdown-Beispiel nicht benötigt.

Dieses zweite Beispiel für eine Browserseite wird ebenfalls nicht ausgeführt präsentiert. Die folgende Seite ist vollständig und verwendet dieselben Optionen, IDs und Farbzuordnungen wie das change()-Beispiel. Sie verwendet on('change', ...), um den Callback zu registrieren, und liest dann die ausgewählte Option aus this.value. Verwenden Sie diese Form, wenn Sie die explizite Ereignis-und-Handler-Struktur von on() wünschen; das sichtbare Ergebnis ist dieselbe Aktualisierung der Hintergrundfarbe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dropdown change with jQuery on()</title>
    <style>
        #Main {
            border: 5px solid green;
            background-color: lightblue;
            min-height: 100px;
            padding: 1rem;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("#bgcolor").on("change", function () {
                var bgcolor = this.value;

                if (bgcolor === "0") {
                    $("#Main").css("background-color", "lightblue");
                } else if (bgcolor === "1") {
                    $("#Main").css("background-color", "lightgreen");
                } else if (bgcolor === "2") {
                    $("#Main").css("background-color", "lightpink");
                } else {
                    $("#Main").css("background-color", "lightgrey");
                }
            });
        });
    </script>
</head>
<body>
    <div id="Main">
        <h1>Delftstack.com</h1>
        <label for="bgcolor">Background color:</label>
        <select name="bgcolor" id="bgcolor">
            <option value="0">Blue</option>
            <option value="1">Green</option>
            <option value="2">Pink</option>
            <option value="3">Grey</option>
        </select>
    </div>
</body>
</html>

Beide Ansätze binden einen Handler an das change-Ereignis; keiner wartet auf einen separaten Schaltflächenklick. Die erste Form ist die jQuery-Kurzschreibweise, während on() das Ereignis und den Callback als separate Argumente benennt. Wählen Sie für ein gegebenes Auswahlfeld eine Bindung, damit die Aktion einmal pro Auswahländerung ausgeführt wird. Wenn der Handler scheinbar nicht ausgeführt wird, prüfen Sie, ob jQuery vor dem Ready-Callback geladen wurde, ob der Selektor mit der ID des Auswahlfelds übereinstimmt und ob der Callback an das Element gebunden ist, dessen Wert Sie benötigen. Eine Seite, die die Hintergrundfarbe aktualisiert, ist nur eine Veranschaulichung: Derselbe this.value kann jede anwendungsspezifische Arbeit innerhalb des Callbacks antreiben.