Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 3 connectés

Bienvenue sur Scripts-fr.com

Boite a liste dynamique


Exemple :

Lorsque l'on a 2 boites à listes, il peut être intéréssant de générer la seconde en fonction du choix effectué dans la première. C'est ce que ce JavaScript propose.


Explication du script : (a copier et à coller)

<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>


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !