<html>
<head>
<title></title>
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
function Choix(formulaire) {
i = formulaire.Boite1.selectedIndex;
/*
Comme toujours, on débute ce javascript par la création d'une fonction. Ici elle recevra en argument le formulaire que l'on va nommer formulaire (oui je sais je suis original).
Nous créons une variable i qui contiendra le numero d'ordre de l'élément sélectionné de la première boite à liste. Ceci est obtenu en utilisant la propriété SelectedIndex de l'objet select (qui, ici, a pour nom Boite1) précédé du nom du formulaire (pour l'exemple, formulaire.
*/
if (i == 0) {
for (i=0;i<3;i++) {
formulaire.Boite2.options[i].text="";
}
return;
}
/*
Nous ouvrons une condition if pour être sur qu'aucun élément n'est encore selectioné (variable i vaut 0), puis une petite boucle for incrémentant i de 0 à 3 (ben oui on a 3 éléments...).
Dans cette boucle nous allons écrire du texte, enfin on va plutôt écrire du vide (""), dans chaque objet option indéxé par i (de 0 à 3).
Ceci est obtenu en utilisant la propriété text de l'objet option. Notre syntaxe est donc : NomDuFormulaire.NomdelaBoiteaListe.options[index].text="mon texte"
Puis il nous suffit de retourner le tout avec l'instruction return
*/
switch (i) {
case 1 : var txt = new Array ('Page 1.1','Page 1.2','Page 1.3'); break;
case 2 : var txt = new Array ('Page 2.1','Page 2.2','Page 2.3'); break;
case 3 : var txt = new Array ('Page 3.1','Page 3.2','Page 3.3'); break;
}
/*
Nous utilisons ici l'instruction switch (qui permet d'évaluer le contenu d'une variable et de la comparer à des constantes, si une des constante est trouvée le jeu d'instruction est executé.
Il ne nous reste plus qu'à définir nos variables. Pour cela on utilise : case ValeurATester : expression.
Donc suivant la valeur de i on crée un nouveau tableau txt avec l'opérateur spécial new contenant les éléments a afficher.
Puis enfin on ajoute l'instruction break qui met fin à l'instructions switch.
*/
formulaire.Boite2.options[0].text="--- Choisissez une Page ---";
for (i=0;i<3;i++) {
formulaire.Boite2.options[i+1].text=txt[i];
}
}
/*
Il ne nous reste plus qu'à finir notre fonction en écrivant nos élements dans la seconde boite.
On commence donc par mettre du texte pour le premier option, je ne reviens pas sur la technique pour le faire, elle est expliqué plus haut.
Ensuite nous ouvrons une boucle for de 0 à 3 (toujours 3 éléments) et on écrit dans chaque option, pour chaque valeur de i+1 (ben oui le 0 c'est le texte qui dit de choisir) le texte correspondant du tableau txt.
*/
// Fin -->
</script>
</head>
<body>
<form action="#" name="formulaire">
<select name="Boite1" onChange='Choix(this.form)'>
<option selected>--- Choisissez une rubrique ---</option>
<option>Rubrique 1</option>
<option>Rubrique 2</option>
<option>Rubrique 3</option>
</select>
<select name="Boite2">
<option selected>--- Choisissez un script ---</option>
<option></option>
<option></option>
<option></option>
</select>
</form>
<!--
Et enfin on écrit nos boites a liste, sans oublier de mettre l'événement OnChange appelant la fonction et lui donnant en argument le formulaire (en utilisant l'opérateur spécial this) sur la première boite.
Pour la seconde boite ne pas oublier de mettre le nombre d'<option> vide devant recevoir du texte
-->
</body>
</html>
| 
