Médiaforma

Accéder à une liste déroulante en JavaScript

Print Friendly, PDF & Email

Cette rubrique va vous montrer comment accéder et modifier l’élément sélectionné dans une liste déroulante.

Le corps du document contient un formulaire nommé form1. Ce formulaire contient :

  • une liste déroulante nommée liste qui héberge quatre éléments : Paris, Tokyo, New York et Madrid ;
  • un bouton qui exécute la fonction modifie_liste() lorsqu’il est cliqué par l’utilisateur.

Examinons le code JavaScript.

La première instruction de la fonction modifie_liste() définit la variable liste et y mémorise l’index de la valeur sélectionnée dans la liste. Pour cela, on utilise la propriété selectedIndex de la liste déroulante. La syntaxe utilisée est similaire à celle rencontrée dans les deux rubriques précédentes :

  • document.forms[« form1 »] donne accès au formulaire ;
  • elements[« liste »] donne accès à l’élément de nom liste, c’est-à-dire à la liste déroulante ;
  • selectedIndex donne accès à la propriété selectedIndex de la liste déroulante, c’est-à-dire à l’index de l’élément sélectionné, entre 0 et le nombre d’éléments moins un. Dans cet exemple, entre 0 et 3.

Si l’index de l’élément est inférieur à 3, il est augmenté d’un, ce qui provoque la sélection de l’élément suivant. Par contre, si l’index est égal à 3, il est mis à 0, ce qui provoque la sélection du premier élément.

Voyons comment est interprété ce code dans un navigateur :

A titre d’information, vous pouvez également utiliser les propriétés JavaScript suivantes :

  • name : nom de la liste ;
  • length : nombre d’entrées dans la liste ,
  • value : valeur d’une entrée ;
  • text : libellé d’une entrée.
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.