Discussion :

[toma03]

Bonjour a tous
je suis débutant en javascript (quelques heures....)
j'aimerais avoir la syntaxe pour faire apparaitre une deuxieme liste déroulante aprés la selection d'une valeur dans une liste déroulante .(listes déroulantes en cascade).

je sais qu'il faut utiliser onselect mais je sais pas trop comment m'en servire....

merci d'avance

[buzzkaido]

Pour faire cela, il faut d'abord que tu apprennes à faire apparaitre/disparaitre des controles HTML.

Pour cela, il y a plusieurs methodes :

- document.write
- utiliser le DOM
- utiliser les proprietes machin.style.display="none";

Le plus simple etant la dernier solution.

Ensuite, une fois que tu sais faire ça (tu trouveras de nombreux exemples sur le net ou sur le forum) il suffit d'appeler ta fonction qui montre/cache la seconde liste dans le onSelect de la premiere liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select ..... onSelect="montrerCacherDeuxiemeListe();">

Evidemment, tu peux ajouter des conditions dans la fonction montrerCacherDeuxiemeListe : verfier qu'un element est bien selectionné dans la premire liste, lequel...

[Matthieu2000]

onChange

[buzzkaido]

pardon, oui dans mon post precedent, il faut remplacer onSelect par onChange, c'est mieux !

Merci Matthieu2000 !

[toma03]

merci je vais regarder tous ca de plus près ....

[toma03]

J'ai cherché mais je n'ai réussi qu'a rediriger vers une autre page( automatiquement avec le onchange) mais pas a afficher une nouvelle liste deroulante en dessous ou a coté de la première.....


si qu'elqu'un peut me montrer un code qui marche , je pense par contre que je pourrai le comprendre assez facilement et le mdifier après comme je le souhaite ....

merci d'avance

[buzzkaido]

Dans ta page, tu peux mettre une balise SELECT comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<select id="maListe" style="display: none;">
   <option value="0">Un truc</option>
   ....
   <option value="9">Un dernier truc</option>
</select>

Ensuite, en javascript, tu declares ces deux fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function afficherElement(idElement)
{
    document.getElementById(idElement).style.display = "block";
}
 
function cacherElement(idElement)
{
    document.getElementById(idElement).style.display = "none";
}

Maintenant, quand tu appelles afficherElement("maListe"); cela affiche ta liste, quand tu fais cacherElement("maListe"); la liste est.... cachée !

Il n'y a plus qu'a appeller cer 2 fonctions dans ton onChange();

Mais bon, quand je disais :

utiliser les proprietes machin.style.display="none";

tu aurais quand même pu chercher sur google... les exemples ne manquent pas.

http://www.google.fr/search?hl=fr&q=...e+Google&meta=