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.