Médiaforma

Accéder à une liste déroulante en JavaScript

Print Friendly

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.

Leave a Reply