| JavaScript - Des listes déroulantes liées |
 |
|
 |
|
|
Dans cet exemple, nous allons modifier dynamiquement le contenu d'une liste déroulante. La première liste est classique et le contenu de la seconde est réaffecté dès que l'on agit sur la première :
 Préparation d'un formulaire
La première liste du formulaire est créee en HTML pur et dur et est nommée sur cet exemple, Rubrique. On l'accompagne toutefois de l'événement onChange qui va déclencher la mise à jour de la deuxième liste, Page :
<![CDATA[<SELECT NAME="Rubrique" onChange='Choix(this.form)'>
<OPTION>-- Choisissez une rubrique ---</OPTION>
<OPTION>Plongée</OPTION>
<OPTION>Nucléaire</OPTION>
<OPTION>Bonheur</OPTION>
</SELECT>]]>
La seconde liste est quasiment vide à la création, car son contenu dépendra de la sélection faite dans la première liste :
<![CDATA[<SELECT NAME="Page">
<OPTION>-- Choisissez une page ---</OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
</SELECT>]]>
La fonction qui travaille
La fonction Choix() sera déclarée dans l'en-tête de la page, comme d'hab' et effectuera les tâches suivantes :
- Repérer la sélection de la première liste
- Ne pas réagir si on sélectionne le 1er élément
- Créer un tableau d'options
- Ecrire les nouvelles options dans la liste
<![CDATA[function Choix(form) {
i = form.Rubrique.selectedIndex;
if (i == 0) {
return;
}
switch (i) {
case 1 : var txt = new Array ('Matériel','Poissons','Sécurité'); break;
case 2 : var txt = new Array ('Radioactivité','Information','Mesures'); break;
case 3 : var txt = new Array ('Philosophie','Psychologie','Humour'); break;
}
form.Rubrique.selectedIndex = 0;
for (i=0;i<3;i++) {
form.Page.options[i+1].text=txt[i];
}
} ]]>
Et après ?
Vous allez me dire "Il ne se passe rien quand je clique dans la deuxième liste !" C'est vrai, ce n'était pas l'objet de l'exemple. Si vous voulez customiser un peu plus vos listes, retournez sur la page Liste déroulante.
|