Ausgewählte Option aus Dropdowns abrufen in jQuery

1. Verwenden Sie die Methode .val(), um die ausgewählte Option aus dem Dropdown-Menü abzurufen
2. Verwenden Sie die .find()-Methode, um die ausgewählte Option aus dem Dropdown-Menü abzurufen
3. Verwenden Sie die .filter()-Methode, um die ausgewählte Option aus dem Dropdown-Menü abzurufen
4. Verwenden Sie die Selektor-jQuery-Erweiterung :ausgewählt, um die ausgewählte Option aus dem Dropdown-Menü abzurufen
5. Verwenden Sie die .text()-Methode, um den ausgewählten Optionstext zu erhalten

In diesem Tutorial erfahren Sie, wie Sie die ausgewählte Option aus der Dropdown-Liste mit jQuery abrufen. Wir werden die Methoden .val(), .find() und .filter() verwenden.

Außerdem besprechen wir, wie Sie den ausgewählten Optionstext mit .text() erhalten.

Verwenden Sie die Methode .val(), um die ausgewählte Option aus dem Dropdown-Menü abzurufen

Mit der .val()-Methode erhalten wir den Wert des ersten Elements in unserer Sammlung ausgewählter Elemente. Es hat einen Sonderfall, wenn Sie es auf ein Dropdown-Auswahlelement anwenden, und es erhält in dieser Situation direkt den Wert der ausgewählten Option.

Wir verwenden diese spezielle Form der .val()-Methode in jQuery, um die ausgewählte Option zu erhalten.

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is :
    ${$("#first-level").val()} <br>`);
});

Unser ID-Element #first-level ist eine Single-Choice-Auswahlbox. Wenn der Callback ausgelöst wird, hängen wir einen Event-Handler an, um auf das Ereignis "change" zu lauschen.

Der Callback zeigt die neu gewählte Option an, indem er die Methode .html() auf ein <p>-Element mit der ID p-first ausführt.

Die Schlüsselausführungszeile ist der Code:

$("#first-level").val()

Die Methode .val() wird auf der Auswahlbox mit der ID first-level ausgeführt, um direkt den Wert der ausgewählten Option zu erhalten. Ein weiterer Spezialfall der .val()-Methode ermöglicht es uns, ihre Verwendung auf die jQuery-Auswahloption nach Wert für Multiple-Choice-Auswahlfelder auszudehnen.

Wenn wir die Methode .val() auf einem Multiple-Choice-Auswahlfeld ausführen, gibt sie ein Array mit den Werten aller ausgewählten Optionen zurück.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

Die Methode val() auf dem Multiple-Choice-Auswahlfeld mit der ID multiple gibt ein Array der Werte der ausgewählten Optionen zurück. Wir verketten dann die Methode .map(), um sie zu durchlaufen, und geben ein Array von <span>-Elementen mit den Werten als Text zurück, der auf der Seite angezeigt werden soll.

Wir können auch die jQuery-Methode .val() verwenden, um ausgewählte Optionen aus gruppierten Auswahlfeldern abzurufen.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

Die gruppierte Auswahlbox mit der ID grouped hat ihre Optionen mit dem Tag <optgroup> in verschiedene Gruppen unterteilt. Die gewählte Option erhalten wir ganz einfach mit der Methode .val().

Vollständiger Code:

//gets the selected option with the jQuery val() method

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

// this directly gets the selected option with the jQuery val() method

//first-level select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").val().map(function(item){
                        return (`<span> ${item} </span>`)
                    })}`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").val()}`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Ausgabe:

Sie können hier ausführlich über die Methode jQuery .val() lesen

Verwenden Sie die .find()-Methode, um die ausgewählte Option aus dem Dropdown-Menü abzurufen

Wir können unsere Sammlung von Elementen auf diejenigen einschränken, die mit der Methode .find() ausgewählt wurden. Wenden Sie dann die Methode .val() in ihrer allgemeinen Form an, um den Wert der ausgewählten Option jQuery zu erhalten.

Die Methode .find() gibt alle Nachkommen des Elements zurück, auf dem sie ausgeführt wird, die mit dem Selektor-Argument übereinstimmen, das wir ihr übergeben. So:

$("ul .vegetables").find("li .green")

.find() gibt nur grüne li-Elemente zurück, die Nachkommen des ul-Elements der .vegetables-Klasse sind. Wir können es verwenden, um ausgewählte Optionen aus Single-Choice-Dropdowns zu erhalten.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").val()} <br>`);
});

Wir verwenden den :s selected-Selektor, um zuerst nur die option-Nachkommenselemente der first-level select-Box zu finden. Wir verketten dann die Methode .val() in ihrer allgemeinen Form, um den Wert zu erhalten.

Wir können diese Methode auch auf Multiple-Choice-Auswahlfelder erweitern.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").find(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

Wir finden zuerst die Sammlung ausgewählter option-Elemente mit dem Code-Snippet $("multiple").find(:selected). Wir iterieren sie dann, indem wir die Methode .map() verketten.

Der Callback sammelt die Werte der ausgewählten Optionen mit dem Codeabschnitt $(this).val() in einem Array von <span>-Elementen. Zuletzt verketten wir die Methoden get() und join(), um diese Werte in einem schönen Textstück anzuzeigen.

Wir können die gleiche Methode für gruppierte Auswahlfelder verwenden.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").find(":selected").val()
       }`);
})

Vollständiger Code:

// we first select the particular option using the find method and then find its val indirectly here

// first-select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple").find(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped").find(":selected").val()
       }`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Ausgabe:

Lesen Sie hier ausführlich über die .find()-Methode

Verwenden Sie die .filter()-Methode, um die ausgewählte Option aus dem Dropdown-Menü abzurufen

Wir können die Methode .filter() verwenden, um nur die ausgewählten Optionen zu sammeln. Dann können wir die Methode .val() in ihrer üblichen Form ausführen, um den Wert der ausgewählten Option jQuery zu erhalten.

Die Methode .filter() unterscheidet sich von der Methode .find() dadurch, dass sie nicht die Nachkommen selektiert, sondern nur die übereinstimmenden Elemente aus der Sammlung, auf der sie aufgerufen wird. Wie im folgenden Snippet können wir es verwenden, um jQuery-Optionen nach Wert auszuwählen.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level option").filter(":selected").val()} <br>`);
});

Wir verwenden den Selektor $("#first-level option"), um explizit die option-Elemente aus dem first-level select-Element zu sammeln.

Denken Sie daran, dass .filter() nicht automatisch die untergeordneten Elemente erhält, wie die Methode .find(). Wir müssen es manuell tun.

Dann verketten wir die .filter(":selected")-Methode, um das ausgewählte option-Element zu erhalten, und verketten die .val()-Methode mit jQuery get selected option. Dasselbe können wir auch für Multiple-Choice-Auswahlfelder tun.

$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple option").filter(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

Der Code ist ähnlich wie bei der obigen .find()-Lösung, außer dass wir option-Elemente manuell mit dem $("#multiple option") Chunk auswählen müssen, bevor wir die .filter()-Methode verketten. Ebenso können wir diese Lösung für gruppierte Optionen verwenden und Dropdowns auswählen.

$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped option").filter(":selected").val()
       }`);
})

Vollständiger Code:

// we can get the selected option with indirect use of val() method and the filter() method

// first-select element
$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level option").filter(":selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple option").filter(":selected").map(function(){
                       return (`<span> ${$(this).val()} </span>`)
                   }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped option").filter(":selected").val()
       }`);
})

//reset and restart again button
$("button").on("click",function(){
    location.reload();
})

Ausgabe:

Verwenden Sie die Selektor-jQuery-Erweiterung :ausgewählt, um die ausgewählte Option aus dem Dropdown-Menü abzurufen

Anstatt die Methoden .find() oder .filter() zu verwenden, können wir auch direkt nur die ausgewählten Optionen mit der jQuery-Erweiterung :s selected auswählen.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level :selected").val()} <br>`);
});

//multiple select element
$("#multiple").on("change",function(){
    $("#p-multiple").html(`The selected items in the multiple-choice box are :
                   ${$("#multiple :selected").map(function(){
                    return (`<span> ${$(this).val()} </span>`)
                }).get().join()
                    }`);
});

//grouped select element
$("#grouped").on("change",function(){
    $("#p-grouped").html(`The selected items in the grouped box are: ${$("#grouped :selected").val()}`);
})

Der Code ist derselbe wie bei den anderen obigen Methoden, außer dass wir den Selektorausdruck $("first-level :s selected") verwenden, bevor wir die anderen Methoden verketten.

Ausgabe:

Es ist besser, zuerst .find() oder .filter() zu verwenden, da der Pseudoselektor :selected eine jQuery-Erweiterung und kein Teil von CSS ist. Es profitiert also nicht von der Leistungssteigerung nativer DOM-Methoden wie reine CSS-Selektoren.

Der :checked-Selektor erhält die ausgewählten Optionen, wenn er auf ein 'select'-Element angewendet wird. Es ist ein reiner CSS-Selektor, also performt er besser als der Pseudo-Selektor :selected.

Verwenden Sie die .text()-Methode, um den ausgewählten Optionstext zu erhalten

Vielleicht möchten Sie den Text im Element option anstelle von Wert finden. Sie können die Methode .text() für jQuery verwenden, um den ausgewählten Optionstext zu erhalten.

$("#first-level").on("change",function(){
    $("#p-first").html(`<br> The selected item in the first single-choice box is : ${$("#first-level").find(":selected").text()} <br>`);
});

Der Rest des Codes ist derselbe wie bei den anderen Methoden oben, außer dass wir die Methode .text() am Ende anstelle der Methode .val() verketten, um den ausgewählten Optionstext zu erhalten.

Ausgabe: