Javascript Sélectionner

exp | JavaScript | log | open | sin | split

Michael Zippo 04.11.2021

Comme vous apprendrez à créer des formulaires Web, l’ une des t√¢ches les plus courantes est d’ obtenir des valeurs de menus déroulants. Dans cet article, nous allons apprendre comment obtenir ces valeurs avec JavaScript.

Faisons un rapide aperçu sur la façon de créer un élément déroulant en utilisant HTML. Suivez mon Codepen si vous êtes perdu.

pour construire notre élément déroulant nous avons besoin d’utiliser le sélectionnez et utilisez l’option enfants nichés en dessous. L’élément de sélection crée le menu déroulant et avec les balises d’option , nous définissons ces options dans le menu déroulant en direct sur.

Créons un menu déroulant de nos fruits préférés (qui ont emojis) .

nous avons ajouté un h2 vide que nous renseignera avec JavaScript plus tard. √Ä ce stade , vous pouvez choisir votre fruit préféré:

Ici , nous accédons les options d’attribut d’ élément de tableau. Ensuite , nous choisissons l’index de l’option sélectionnée et accéder à sa valeur ou texte.

maintenant , essayez de console.log les deux variables. Que se passe-t-il? Rien. Pouquoi? Parce que notre premier élément a une valeur vide (il est juste un espace réservé). Donnez votre avis sur la première option et essayer à nouveau. Yay! Nous obtenons la valeur et le texte avec le javascript.

√Ä l’ écoute des changements de menu déroulant avec JavaScript

Nous devons rendre notre dynamique de menu déroulant car JavaScript est conçu pour réagir aux changements sur votre page. Dans cet esprit , nous allons attribuer un eventListener à notre élément de fruit.

Avec notre eventListener nous entendons un changement dans notre menu déroulant. Notez que vous pouvez également obtenir la valeur de l’option sélectionnée en exécutant e.target.value , ce que vous avez probablement vu dans un autre tutoriel module.

nous sommes ici. Vous pouvez maintenant sélectionner une option de fruits et JavaScript réagit aux changements dans notre menu déroulant et mettre à jour notre h2 en conséquence. Droit fructueux