Version imprimable
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
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 :
Evidemment, tu peux ajouter des conditions dans la fonction montrerCacherDeuxiemeListe : verfier qu'un element est bien selectionné dans la premire liste, lequel...Code:<select ..... onSelect="montrerCacherDeuxiemeListe();">
:faq:
Citation:
onChange
pardon, oui dans mon post precedent, il faut remplacer onSelect par onChange, c'est mieux !
Merci Matthieu2000 !
merci je vais regarder tous ca de plus près ....
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
Dans ta page, tu peux mettre une balise SELECT comme ça :
Ensuite, en javascript, tu declares ces deux fonctions :Code:
2
3
4
5
Code:
2
3
4
5
6
7
8
9
10
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 :
tu aurais quand même pu chercher sur google... les exemples ne manquent pas.Citation:
utiliser les proprietes machin.style.display="none";
http://www.google.fr/search?hl=fr&q=...e+Google&meta=
Je suis désolé mais je suis vraiment débutant en JS , j'ai essayé ça mais quand je séléctionne une valeur dans ma première liste la deuxieme ne s'affiche pas .
Voici ce que j'ai essayé sans succés :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Euh, oui, mais là tu as fais ça :
Il ya deja une erreur de syntaxe :Code:<select id="maListe" onChange="afficherElement(maliste)" style="display: block; >
Cette liste est affichée : display: block;Code:<select id="maListe" onChange="afficherElement(maliste);" style="display: block;" >
Et dans l'evenement onChange, tu veux l'afficher :
Donc afficher une liste déjà affichée....Code:onChange="afficherElement(maliste);"
Si tu veux que ça fasse quelque chose, il faut au moins deux listes (ou deux objets) avec une action sur un qui affiche l'autre.
Impossible . Je n'arrive pas à faire ce que je veux je comprend pas très bien malgrès ton aide !!!!oops:
peux-tu :me donner le code qui :
_ afficiche une liste déroulante :--> liste1
_ Quand on sélectionne un élément dans la liste1 , une autre liste déroulante apparait en dessous par exemple :-->liste2
encore désolé
Tu as deja le code avec afficher/cacherElement.Citation:
_ afficiche une liste déroulante :--> liste1
Mais, si tu veux que ta liste soit cachée au depart, il faut que tu utilise :
Pour l'afficher, tu veux quoi ?Code:style="display: none;"
Si tu veux qu'elle s'affiche quand on clique sur un bouton, il faut faire :
Si tu veux afficher la liste 2 quand on clique sur la liste 1, il faut faire :Code:<button type="button" onClick="afficherElement('maListe1');">
Dans ton code, tu faisait ça :Code:<select id="maListe1" onChange="afficherElement('maliste2');">
- afficher la liste "maListe" avec display: block; dans la balise SELECT
- afficher la liste "maListe" avec afficherElement(maListe); en bas de la page
- afficher la liste "maListe" quand on clique dans "maListe" avec onChange
Ce qui n'a pas beaucoup de sens....
Precision : quand tu appelles afficherElement ou cacherElement, il faut utiliser des ' autour du nom de l'element, car c'est une chaine de caractere.
afficherElement(maliste); -> faux
afficherElement('maliste'); -> juste
Salut, n'oubli pas de rajouter un " a la fin de ton code de la premiere ligne du message #8, sinon sa fonctionnera pas même si ton code est bon :mrgreen:
A+
Merci beaucoup ça marche !!!
Maintenant je vais essayé d'afficher une seconde liste déroulante selon l'élément choisi dans la premiere .... je vais devoir utilisé des if ?
merci encore
C'est une condition, ça, non ?Citation:
selon l'élément choisi dans la premiere
Donc il faudra au moins une instruction.... conditionnelle !
"if" ou "switch"
oui s'est ce que je pensais : avec un if ca dois etre jouable , mais je ne vois pas comment l'utilisé :
Je pensai aussi recréer une fonction qui envoi comme pamametre l'id de la "bonne liste à afficher", à la fonction ,afficherElement() .
??????......................
?????
J'ai rien compris ?
Essaie d'expliquer :
1/ ce que tu veux faire
2/ là où tu bloques
Parce que là, tout de suite, j'ai pas ma boule de crystal, c'est Sangoku qui me l'a piquée.
Tu devrai peut etre utiliser switch plutot, comme le propose buzzkaido.
C'est fonction "selon" en fait.
En javascript je sais plus ce que sa donne mais en algo c'est:
Selon :
choix1: (conditon)
choix2: (condition)
choix3: (condition)
...
Sa fait un moment que je ne m'en suis pas servit mais si tu dois vraiment avoir différents résultats "selon" l'action réalisée, se sera plus court d'utiliser cette fonction que des if imbriquées ;).
Regarde dans le cours javascript, sa doit bien être indiqué comment s'en servir;)
J'ai cherché un peu mais j'ai pas trouver grand chose en tous cas rien qui solutionne mon probleme ,
Avec l'aide de buzzkaido j'ai réussis à mettre au point une liste déroulante qui , après selection dans la liste affiche une deuxieme liste déroulante . Cette deuxieme liste déroulante est toujour la meme , peu importe le choix selectionné dans la premiere liste .
Maintenant j'aimerais que la deuxieme liste soit differente selon le choix selectionné dans la première liste ....
j'ai essayé d'etre le plus clair possible , si vous pouvez me dire quelles sont les modifications à apporter à mon code pour permettre cela :
Merci pour votre aideCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Et dans le javascript :Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32<label> <select id="maListe1" onChange="cacherToutesLesListes();afficherElement(this.value);"> <option value="maSecondeListe_1">test1</option> <option value="maSecondeListe_2">test2</option> <option value="maSecondeListe_3">test3</option> </select> </label> <label> <select name="maSecondeListe_1" id="maSecondeListe_1" style="display: none;"> <option>ok </option> <option>toto</option> <option>titi</option> </select> </label> <label> <select name="maSecondeListe_2" id="maSecondeListe_2" style="display: none;"> <option>ok </option> <option>toto</option> <option>titi</option> </select> </label> <label> <select name="maSecondeListe_3" id="maSecondeListe_3" style="display: none;"> <option>ok </option> <option>toto</option> <option>titi</option> </select> </label>
En gros, pour chacune des options, tu mets comme valeur l'id de la liste qui doit etre affichée quand on clique dessus.Code:
2
3
4
5
6
La fonction "cacherToutesLesListes" sert à toutes les cacher avant de d'afficher celle que l'on veut, comme ça il n'y en a qu'une d'affichée à la fois.
Merci beaucoup ,
ca marche impecable ....