Option actuellement sélectionnée dans JavaScript

1. Utilisez HTMLSelectElement.options pour obtenir l’option actuelle à partir d’une liste de sélection à l’aide de JavaScript
2. Utilisez HTMLSelectElement.selectedOptions pour obtenir l’option actuelle à partir d’une liste de sélection à l’aide de JavaScript

Nous pouvons avoir différents types de formulaires dans les pages Web, où chaque champ est d’un certain type. Parfois, nous devons choisir une option dans la liste déroulante. L’élément <select> permet de créer une liste déroulante. Les balises <option> à l’intérieur de la balise <select> sont utilisées pour définir les options dans la liste déroulante.

Ce tutoriel présentera comment obtenir l’option actuellement sélectionnée dans l’élément <select> à l’aide de JavaScript.

Utilisez HTMLSelectElement.options pour obtenir l’option actuelle à partir d’une liste de sélection à l’aide de JavaScript

La propriété HTMLSelectElement.options renvoie les HtmlOptionsCollections des éléments <option> présents dans l’élément <select>.

Nous pouvons créer une fonction qui affichera la valeur de l’option sélectionnée dans la liste.

Vérifiez le code ci-dessous

Code HTML:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Code JavaScript :

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

Le selectedIndex renvoie l’index de l’option sélectionnée.

Utilisez HTMLSelectElement.selectedOptions pour obtenir l’option actuelle à partir d’une liste de sélection à l’aide de JavaScript

Ce HTMLSelectElement.selectedOptions contient la liste de tous les éléments <option> qui sont définis dans l’élément <select> qui sont sélectionnés.

Vérifiez le code ci-dessous.

Code HTML:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Code JavaScript :

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

Cette méthode ne fonctionne généralement pas sur Internet Explorer.