HTMLSelectElement : proprit selectedOptions

Valeur

Un objet HTMLCollection qui liste chaque HTMLOptionElement actuellement slectionn, qu'il soit enfant de HTMLSelectElement ou d'un HTMLOptGroupElement l'intrieur de l'lment <select>.

En d'autres termes, toute option contenue dans l'lment <select> peut faire partie des rsultats, mais les groupes d'options ne sont pas inclus dans la liste.

Si aucune option n'est actuellement slectionne, la collection est vide et retourne une length de 0.

Exemples

Dans cet exemple, un lment <select> avec plusieurs options permet l'utilisateurice de commander diffrents aliments.

HTML

Le code HTML qui cre la bote de slection et les lments <option> reprsentant chaque choix alimentaire ressemble ceci :

<label for="foods">Que voulez-vous manger&nbsp;?</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 suprme</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'lment <select> permet de slectionner plusieurs lments et a une hauteur de 7 lignes. Notez aussi le <button>, dont le rle est de dclencher la rcupration de la collection HTMLCollection des lments slectionns via la proprit selected.

JavaScript

Le code JavaScript qui tablit le gestionnaire d'vnement pour le bouton, ainsi que le gestionnaire lui-mme, 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 lments suivants a t passe : ";
    }
    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'vnement click sur le bouton  Commander . Lors d'un clic, le gestionnaire rcupre la liste des options slectionnes via selectedOptions, puis parcourt les options de la liste. Une chane de caractres est construite pour lister les lments commands, avec une logique pour formater la liste selon la grammaire franaise.

Rsultat

Le rsultat ressemble ceci en action :

Spcifications

Compatibilit des navigateurs

Voir aussi

• Contrles droulants