HTMLSelectElement : propriété selectedOptions
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété en lecture seule HTMLSelectElement selectedOptions contient une liste des éléments HTML <option> contenus dans l'élément HTML <select> qui sont actuellement sélectionnés. La liste des options sélectionnées est un objet HTMLCollection avec une entrée pour chaque option actuellement sélectionnée.
Une option est considérée comme sélectionnée si elle possède l'attribut HTMLOptionElement.selected.
Valeur
Un objet HTMLCollection qui liste chaque HTMLOptionElement actuellement sélectionné, qu'il soit enfant de HTMLSelectElement ou d'un HTMLOptGroupElement à l'intérieur de l'élément <select>.
En d'autres termes, toute option contenue dans l'élément <select> peut faire partie des résultats, mais les groupes d'options ne sont pas inclus dans la liste.
Si aucune option n'est actuellement sélectionnée, la collection est vide et retourne une length de 0.
Exemples
Dans cet exemple, un élément <select> avec plusieurs options permet à l'utilisateur·ice de commander différents aliments.
HTML
Le code HTML qui crée la boîte de sélection et les éléments <option> représentant chaque choix alimentaire ressemble à ceci :
<label for="foods">Que voulez-vous manger ?</label><br />
<select id="foods" name="foods" size="7" multiple>
<option value="1">Burrito</option>
<option value="2">Cheeseburger</option>
<option value="3">Double bacon burger suprême</option>
<option value="4">Pizza au pepperoni</option>
<option value="5">Taco</option>
</select>
<br />
<button name="order" id="order">Commander</button>
<p id="output"></p>
L'élément <select> permet de sélectionner plusieurs éléments et a une hauteur de 7 lignes. Notez aussi le <button>, dont le rôle est de déclencher la récupération de la collection HTMLCollection des éléments sélectionnés via la propriété selected.
JavaScript
Le code JavaScript qui établit le gestionnaire d'évènement pour le bouton, ainsi que le gestionnaire lui-même, ressemble à ceci :
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");
orderButton.addEventListener("click", () => {
let collection = itemList.selectedOptions;
let output = "";
for (let i = 0; i < collection.length; i++) {
if (output === "") {
output = "Votre commande pour les éléments suivants a été passée : ";
}
output += collection[i].label;
if (i === collection.length - 2 && collection.length < 3) {
output += " et ";
} else if (i < collection.length - 2) {
output += ", ";
} else if (i === collection.length - 2) {
output += ", et ";
}
}
if (output === "") {
output = "Vous n'avez rien commandé !";
}
outputBox.textContent = output;
});
Ce script ajoute un écouteur d'évènement click sur le bouton « Commander ». Lors d'un clic, le gestionnaire récupère la liste des options sélectionnées via selectedOptions, puis parcourt les options de la liste. Une chaîne de caractères est construite pour lister les éléments commandés, avec une logique pour formater la liste selon la grammaire française.
Résultat
Le résultat ressemble à ceci en action :
Spécifications
| Specification |
|---|
| HTML # dom-select-selectedoptions-dev |