Comment obtenir la valeur de l'option sélectionnée dans la liste déroulante en JavaScript

Pour obtenir le choix actuel d’une liste déroulante HTML, lisez la propriété value de l’élément select. Ajoutez un écouteur d’événement change lorsque la page doit réagir pendant que l’utilisateur choisit une autre option ; l’événement fonctionne aussi bien pour la sélection au clavier qu’au pointeur.

Obtenir la valeur de l’option sélectionnée d’une liste déroulante en JavaScript

Placez l’élément de sortie à côté de la liste déroulante, puis chargez le script après ce balisage : <label for="plan">Plan</label> <select id="plan"><option value="starter">Starter plan</option><option value="pro" selected>Pro plan</option></select> <output id="chosen-plan"></output>. Chaque option possède une valeur lisible par machine et une étiquette lisible. L’attribut selected fait de pro le choix initial, de sorte que la page peut l’afficher avant que l’utilisateur ne change quoi que ce soit.

Le JavaScript trouve ces deux éléments grâce à leurs ID. Il écoute un changement de sélection, copie la valeur actuelle dans la sortie et appelle une fois la même fonction pour afficher le choix initial :

const planSelect = typeof document === "undefined"
  ? {
      value: "pro",
      addEventListener(eventName, handler) {
        this.changeHandler = handler;
      }
    }
  : document.querySelector("#plan");
const chosenPlan = typeof document === "undefined"
  ? { textContent: "" }
  : document.querySelector("#chosen-plan");

function showChosenPlan() {
  chosenPlan.textContent = planSelect.value;
  console.log(chosenPlan.textContent);
}

planSelect.addEventListener("change", showChosenPlan);
showChosenPlan();

pro

Dans un navigateur, document.querySelector("#plan") trouve l’élément select et document.querySelector("#chosen-plan") trouve l’élément de sortie. Les objets de remplacement sont utilisés lorsque l’exemple s’exécute là où il n’y a pas de document de navigateur ; ils fournissent la même valeur initiale pro pour l’exécution de l’exemple fourni. La sortie affiche la valeur de l’option sélectionnée, soit pro, plutôt que son étiquette visible, Pro plan.

L’écouteur change s’exécute après que l’utilisateur a choisi une autre option, qu’il utilise un pointeur ou le clavier. L’appel initial à showChosenPlan() est distinct car l’enregistrement d’un écouteur ne déclenche pas lui-même un événement change. Si l’utilisateur choisit Starter plan, la sortie devient starter ; la valeur affichée dépend donc du choix actuel plutôt que de suivre une séquence fixe.

Utilisez planSelect.value directement lorsque vous n’avez besoin de la sélection actuelle qu’une seule fois. Si vous avez besoin de l’étiquette visible plutôt que de la valeur, lisez planSelect.selectedOptions[0].textContent. Le value d’un élément select est une chaîne ; convertissez-le explicitement, par exemple avec Number(planSelect.value), si votre code a besoin d’un nombre.

Gardez les ID du balisage et les sélecteurs du script alignés. Si un sélecteur s’exécute avant que son élément n’existe, querySelector renvoie null ; placez le script après le balisage ou attendez que le document soit chargé. Si des options sont ajoutées ultérieurement, l’écouteur peut toujours lire la valeur sélectionnée dans l’élément select lorsque l’utilisateur modifie la sélection.