Obtenez la valeur de l'option sélectionnée dans la liste déroulante en JavaScript
En JavaScript, travailler avec ou garder une trace des interactions de l’utilisateur comme les clics de souris ou les touches du clavier est un défi. Grâce aux événements JavaScript, il nous est plus facile de suivre les interactions de l’utilisateur et d’obtenir les valeurs mises à jour une fois que les utilisateurs de la page Web ont apporté quelques modifications.
Par exemple, s’il y a un menu déroulant et que vous devez sélectionner une option dans la liste de tous les autres choix, voici ce qui se passerait : vous pouvez facilement obtenir la valeur de l’option que vous avez sélectionnée dans le menu déroulant liste à l’aide des événements clic de la souris.
Vous verrez comment implémenter cela en détail en lisant cet article.
Obtenir l’option sélectionnée à partir d’une liste à l’aide d’événements de souris en JavaScript
Les événements en JavaScript sont un excellent moyen de suivre les interactions de l’utilisateur sur la page Web, comme les clics de souris ou les événements de clic de clavier. Il existe divers événements disponibles en JavaScript, dont une liste complète peut être trouvée ici. De tous ces événements, nous nous concentrerons uniquement sur l’événement clic de la souris.
Chaque fois que les utilisateurs cliquent sur l’une des options présentes dans la liste déroulante, notre événement de clic de la souris sera déclenché. Avec cette fonctionnalité, nous pouvons facilement obtenir la valeur de l’option sélectionnée dans la liste déroulante.
Voyons maintenant comment cela fonctionne pendant l’exécution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
Ce qui suit est le code JavaScript.
function myFunction() {
let elem = document.querySelectorAll('.drop-down');
elem.forEach(element => {
element.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
})
}
myFunction();
Production:
test2
test3
test1
Notez que la sortie variera en fonction de l’option sélectionnée par l’utilisateur dans la liste déroulante.
A l’intérieur de notre HTML, nous avons une balise select avec un id de list, qui sera utilisé pour créer une liste déroulante. Dans ce cas, il y a trois options à l’intérieur de la balise select, chacune ayant un nom de classe drop-down. Et à la fin, nous relions le code JavaScript à la fin de la balise body puisqu’il est présent dans un fichier séparé.
A l’intérieur du JavaScript, nous avons une fonction nommée myFunction(). Ici, nous obtenons d’abord tous les éléments d’option de la liste déroulante en utilisant le nom de classe drop-down en utilisant la propriété querySelectorAll. Ce processus renverra un tableau contenant toutes les options de la liste déroulante. Ensuite, nous allons stocker ce tableau à l’intérieur d’une variable appelée elem.
Maintenant que nous avons toutes les options stockées dans la variable elem, nous allons utiliser une boucle for each sur cette variable. La boucle for each nous aidera à obtenir les éléments individuels du tableau, nous pouvons donc maintenant ajouter des écouteurs d’événement à chacun de ces éléments d’option du tableau.
Les éléments individuels à l’intérieur du tableau sont accessibles avec la variable élément, passée en argument à la boucle for each. Pour ajouter un événement à element, nous devons utiliser une méthode fournie par JavaScript appelée addEventListener(), qui prend deux arguments.
Le premier argument est l’événement click, et le deuxième argument est la fonction callback. L’événement click indique au navigateur d’exécuter la fonction callback uniquement lorsqu’un utilisateur clique (bouton gauche de la souris) sur l’une des options de la liste déroulante. La fonction callback elle-même prend un argument appelé e ou événement qui nous aidera à obtenir l’élément sélectionné par l’utilisateur.
Dans la fonction callback, vous pouvez écrire le code que vous voulez. Puisque nous voulons récupérer la valeur de l’option sélectionnée dans ce cas, nous utiliserons e.target. Cette commande indiquera quel élément HTML est actuellement sélectionné.
Enfin, pour obtenir la valeur de cette option sélectionnée, nous pouvons utiliser e.target.innerHTML et la passer dans la méthode console.log() pour voir la sortie dans la fenêtre de la console.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn