Obtenir l'option sélectionnée à partir de la liste déroulante dans jQuery

1. Utilisez la méthode .val() pour obtenir l’option sélectionnée à partir de la liste déroulante
2. Utilisez la méthode .find() pour obtenir l’option sélectionnée dans la liste déroulante
3. Utilisez la méthode .filter() pour obtenir l’option sélectionnée à partir de la liste déroulante
4. Utilisez l’extension jQuery du sélecteur :selected pour obtenir l’option sélectionnée à partir de la liste déroulante
5. Utilisez la méthode .text() pour obtenir le texte d’option sélectionné

Ce tutoriel abordera comment obtenir l’option sélectionnée dans la liste déroulante à l’aide de jQuery. Nous utiliserons les méthodes .val(), .find() et .filter().

Nous verrons également comment obtenir le texte de l’option sélectionnée avec .text().

Utilisez la méthode .val() pour obtenir l’option sélectionnée à partir de la liste déroulante

En utilisant la méthode .val(), nous obtenons la valeur du premier élément de notre collection d’éléments sélectionnés. Il a un cas particulier lorsque vous l’appliquez à un élément de sélection déroulant, et il obtient directement la valeur de l’option sélectionnée dans cette situation.

Nous utilisons cette forme spéciale de la méthode .val() dans jQuery pour obtenir l’option sélectionnée.

//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>`);
});

Notre élément d’identification #first-level est une boîte de sélection à choix unique. Lorsque le rappel se déclenche, nous attachons un gestionnaire d’événements pour écouter l’événement "change".

Le rappel affiche l’option nouvellement sélectionnée en exécutant la méthode .html() sur un élément <p> avec l’ID p-first.

La ligne d’exécution clé est le code :

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

La méthode .val() s’exécute sur la boîte de sélection avec l’ID premier niveau pour obtenir directement la valeur de l’option sélectionnée. Un autre cas particulier de la méthode .val() nous permet d’étendre son utilisation à l’option de sélection jQuery par valeur pour les boîtes de sélection à choix multiples.

Lorsque nous exécutons la méthode .val() sur une boîte de sélection à choix multiples, elle renvoie un tableau avec les valeurs de toutes les options sélectionnées.

$("#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>`)
                    })}`);
});

La méthode val() sur la boîte de sélection à choix multiples avec l’ID multiple renvoie un tableau des valeurs des options sélectionnées. Nous enchaînons ensuite la méthode .map() pour les itérer et renvoyons un tableau d’éléments <span> avec les valeurs sous forme de texte à afficher sur la page.

Nous pouvons également utiliser la méthode .val() jQuery pour obtenir les options sélectionnées à partir de boîtes de sélection groupées.

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

La boîte de sélection groupée avec l’ID grouped a ses options séparées en différents groupes avec la balise <optgroup>. On récupère facilement l’option sélectionnée avec la méthode .val().

Code complet :

//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();
})

Production:

Vous pouvez lire en détail la méthode jQuery .val() ici

Utilisez la méthode .find() pour obtenir l’option sélectionnée dans la liste déroulante

Nous pouvons restreindre notre collection d’éléments à ceux sélectionnés avec la méthode .find(). Ensuite, appliquez la méthode .val() dans sa forme générale pour obtenir la valeur de l’option jQuery sélectionnée.

La méthode .find() renvoie tous les descendants de l’élément sur lequel elle s’exécute et qui correspondent à l’argument du sélecteur que nous lui passons. Ainsi:

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

Le .find() renverra uniquement les éléments verts li descendants de l’élément ul de la classe .vegetables. Nous pouvons l’utiliser pour obtenir des options sélectionnées à partir de listes déroulantes à choix unique.

$("#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>`);
});

Nous utilisons le sélecteur :selected pour d’abord trouver uniquement les éléments option descendants de la boîte select de first-level. On enchaîne ensuite la méthode .val() dans sa forme générale pour obtenir la valeur.

Nous pouvons également étendre cette méthode aux cases de sélection à choix multiples.

$("#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()
                    }`);
});

Nous trouvons d’abord la collection d’éléments option sélectionnés avec l’extrait de code $("multiple").find(:selected). On les itère ensuite en chaînant la méthode .map().

Le rappel collecte les valeurs des options sélectionnées avec le morceau de code $(this).val() dans un tableau d’éléments <span>. Enfin, nous chaînons les méthodes get() et join() pour afficher ces valeurs dans un joli texte.

Nous pouvons utiliser la même méthode pour les zones de sélection groupées.

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

Code complet :

// 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();
})

Production:

Lire en détail la méthode .find() ici

Utilisez la méthode .filter() pour obtenir l’option sélectionnée à partir de la liste déroulante

Nous pouvons utiliser la méthode .filter() pour ne collecter que les options sélectionnées. Ensuite, nous pouvons exécuter la méthode .val() dans sa forme habituelle pour obtenir la valeur de l’option jQuery sélectionnée.

La méthode .filter() diffère de la méthode .find() en ce qu’elle ne sélectionne pas les descendants mais sélectionne uniquement les éléments correspondants de la collection sur laquelle elle est appelée. Comme dans l’extrait suivant, nous pouvons l’utiliser pour jQuery sélectionner l’option par valeur.

$("#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>`);
});

Nous utilisons le sélecteur $("#first-level option") pour collecter explicitement les éléments option de l’élément select de first-level.

N’oubliez pas que .filter() ne récupère pas automatiquement les éléments descendants comme la méthode .find(). Nous devons le faire manuellement.

Ensuite, nous enchaînons la méthode .filter(":selected") pour obtenir l’élément option sélectionné, et enchaînons la méthode .val() à jQuery pour obtenir l’option sélectionnée. Nous pouvons également faire de même pour les cases à choix multiples.

$("#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()
                    }`);
});

Le code est similaire à la solution .find() ci-dessus, sauf que nous devons sélectionner manuellement les éléments option avec le bloc $("#multiple option") avant de chaîner la méthode .filter(). De même, nous pouvons utiliser cette solution pour les options groupées et sélectionner les listes déroulantes.

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

Code complet :

// 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();
})

Production:

Utilisez l’extension jQuery du sélecteur :selected pour obtenir l’option sélectionnée à partir de la liste déroulante

On peut aussi sélectionner directement uniquement les options sélectionnées avec l’extension jQuery :selected au lieu d’utiliser les méthodes .find() ou .filter().

$("#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()}`);
})

Le code est le même que les autres méthodes ci-dessus, sauf que nous utilisons l’expression de sélecteur $("first-level :selected") avant d’enchaîner les autres méthodes.

Production:

Il est préférable d’utiliser d’abord .find() ou .filter() car le pseudo-sélecteur :selected est une extension jQuery et ne fait pas partie de CSS. Ainsi, il ne bénéficie pas de l’amélioration des performances des méthodes DOM natives comme le font les sélecteurs CSS purs.

Le sélecteur :checked obtient les options sélectionnées lorsqu’il est appliqué à un élément 'select'. C’est un pur sélecteur CSS, il est donc plus performant que le pseudo-sélecteur :selected.

Utilisez la méthode .text() pour obtenir le texte d’option sélectionné

Vous voudrez peut-être trouver le texte à l’intérieur de l’élément option au lieu de valeur. Vous pouvez utiliser la méthode .text() de jQuery pour obtenir le texte de l’option sélectionnée.

$("#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>`);
});

Le reste du code est le même que les autres méthodes ci-dessus, sauf que nous enchaînons la méthode .text() à la fin au lieu de la méthode .val() pour obtenir le texte de l’option sélectionnée.

Production: