menu déroulant javascript

**metaleurop** · 10/07/2008, 20h20

Bonjour à tous.
J'ai un problème avec le script suivant:

Code :

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

1
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
function gensel2()
{ s2.length=0;
for ( var n=0; n<list[s1.selectedIndex].length; n++ )
{ s2.length++;
s2.options[s2.length-1].text=list[s1.selectedIndex][n]; 
} 
}
</script>
<script type="text/javascript">
function gensel3()
{ s3.length=0;
for ( var k=0; k<liste[s2.selectedIndex].length; k++ )
{ s3.length++;
s3.options[s3.length-1].text=liste[s2.selectedIndex][k]; 
} 
}
</script>
 
</HEAD>
<BODY>
<form name="frm">
 
<select size=4
name="sel1"
id="sel1"
onchange="gensel2();">
<optgroup label="Choisissez votre rubrique">
<option>Sixième</option>
<option>Cinquième</option>
<option>Quatrième</option>
<option>Troisième</option>
</optgroup>
</select>
 
<select size=4
name="sel2"
id="sel2"
onchange="gensel3();">
<optgroup label="Choisissez votre rubrique">
</optgroup>
</select>
 
 
<select size=4
name="sel3"
id="sel3">
<optgroup label="Choisissez votre rubrique">
</optgroup>
</select>
 
 
</form>
<script type="text/javascript">
var s1=document.getElementById("sel1");
var s2=document.getElementById("sel2"); 
var list=new Array(
new Array("Numérique","Géométrie"),
new Array("Numérique","Géométrie"),
new Array("Numérique","Géométrie"),
new Array("Numérique","Géométrie")
);
</script>
<script type="text/javascript">
var s2=document.getElementById("sel2");
var s3=document.getElementById("sel3"); 
var liste=new Array(
new Array("..."),
new Array("...."),
new Array("non","Finistère","Ille-et-Vilaine","Morbihan"),
new Array ("Priorités opératoires","Fractions","proportionnalité","Calcul littéral","Nombres relatifs","Statistiques"),
new Array("à venir "),
new Array("nombres relatifs","Fractions","Puissances","calul littéral","Equations","Proportionnalité"),
new Array("but"),
new Array("rien"),
new Array("rien2")
);
</script>
 
 
</BODY></HTML>

Le script affiche ... ou .... dans la dernière liste quel que soit le choix opéré dans les 2 premières listes.
Quelqu'un pourrait m'aider svp??
Merci

Invité · 10/07/2008, 22h10

Bonsoir,

Logique, dans ta seconde liste tu n'as que 2 choix :
1er choix => Array("...")
2eme choix => Array("....")

Si dans ta liste 2 tu mets 3 choix :
3eme choix => Array("non","Finistère","Ille-et-Vilaine","Morbihan")
et ainsi de suite...

Code :

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

1
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
65
66
67
68
69
70
71
72
73
74
75
 
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
function gensel2() { 
     s2.length=0;
     for ( var n=0; n<list[s1.selectedIndex].length; n++ ) { 
         s2.length++;
         s2.options[s2.length-1].text=list[s1.selectedIndex][n]; 
     } 
}
 
function gensel3() { 
    s3.length=0;
    for ( var k = 0; k < liste[s2.selectedIndex].length; k++ ) { 
        s3.length++;
        s3.options[s3.length-1].text=liste[s2.selectedIndex][k]; 
    } 
}
</script>
 
</HEAD>
<BODY>
<form name="frm">
 
<select size=4 name="sel1" id="sel1" onchange="gensel2();">
    <optgroup label="Choisissez votre rubrique">
    <option>Sixième</option>
    <option>Cinquième</option>
    <option>Quatrième</option>
    <option>Troisième</option>
    </optgroup>
</select>
 
<select size=4 name="sel2" id="sel2" onchange="gensel3();">
    <optgroup label="Choisissez votre rubrique">
    </optgroup>
</select>
 
 
<select size=4 name="sel3" id="sel3">
    <optgroup label="Choisissez votre rubrique">
    </optgroup>
</select>
 
 
</form>
<script type="text/javascript">
var s1=document.getElementById("sel1");
var s2=document.getElementById("sel2"); 
var s3=document.getElementById("sel3"); 
 
var list=new Array(
    new Array("Numérique","Géométrie"),
    new Array("Numérique2","Géométrie2", "latitude2"),
    new Array("Numérique3","Géométrie3", "latitude2", "longitude3"),
    new Array("Numérique4","Géométrie4")
);
 
var liste=new Array(
    new Array("..."),
    new Array("...."),
    new Array("non","Finistère","Ille-et-Vilaine","Morbihan"),
    new Array ("Priorités opératoires","Fractions","proportionnalité","Calcul littéral","Nombres relatifs","Statistiques"),
    new Array("à venir "),
    new Array("nombres relatifs","Fractions","Puissances","calul littéral","Equations","Proportionnalité"),
    new Array("but"),
    new Array("rien"),
    new Array("rien2")
);
</script>
 
 
</BODY></HTML>

A+

**metaleurop** · 10/07/2008, 22h29

En fait,ce que je veux, c'est que par exemple pour cinquième
il s'affiche dans la 2e liste:Numérique
Géométrie
et une fois appuyé sur Numérique s'affiche Priorités opératoires
Fractions
Proportionnalité

etc...
mais c'est toujours ... qui apparait quand je choisis numérique
C'est cela que je ne comprends pas..
Mercipour ton aide

Invité · 10/07/2008, 22h37

Code :

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

1
2
3
4
5
6
7
8
 
var list=new Array(
// Numérique => selectedIndex = 0, Géométrie => selectedIndex = 1, .....
    new Array("Numérique","Géométrie"), 
    new Array("Numérique2","Géométrie2", "latitude2"),
    new Array("Numérique3","Géométrie3", "latitude2", "longitude3"),
    new Array("Numérique4","Géométrie4")
);

Si dans ton SELECT 2, tu veux qu'une sélection renvoie un tableau particulier dans ton SELECT 3, il te faudra une donnée supplémentaire qui sera l'index de l'élément voulu dans le tableau liste

Voilà

**metaleurop** · 10/07/2008, 22h46

qu'est ce que cela donne alors au niveau du script??
j'ai du mal à comprendre en fait..
Merci

Invité · 10/07/2008, 23h26

Voilà;
Dans ton tableau list, j'ai ajouté après chaque élément de choix, l'index du tableau liste qui permet de récupérer la liste de choix voule pour le 3ème SELECT

Ex: dans ton SELECT n°1 tu cliques sur quatrième
Ce qui t'affiche dans le SELECT N°2

Numérique3
Géométrie3
latitude2
longitude3

Et si tu cliques sur longitude3, dans ton SELECT n°3 sera affiché le contenu de liste[3]
=> "Priorités opératoires","Fractions","proportionnalité","Calcul littéral","Nombres relatifs","Statistiques" (les index de tableau partant de 0)

Et si tu cliques sur Géometrie3, dans ton SELECT n°3 sera affiché le contenu de liste[1] ...

Code :

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

1
2
3
4
5
6
7
 
var list=new Array(
    new Array("Numérique",5,"Géométrie",6),
    new Array("Numérique2",2,"Géométrie2",7),
    new Array("Numérique3",0,"Géométrie3",1, "latitude2",2, "longitude3",3),
    new Array("Numérique4",7,"Géométrie4",8)
);

la source

Code :

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

1
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
65
66
67
68
69
70
71
72
73
74
75
76
 
<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
function gensel2() { 
         s2.length=0;
         for ( var n=0; n<list[s1.selectedIndex].length; n=n+2 ) { 
             s2.length++;
             s2.options[s2.length-1].text=list[s1.selectedIndex][n]; 
         } 
}
 
function gensel3() { 
    s3.length=0;
    choix = list[s1.selectedIndex][(s2.selectedIndex*2) + 1];
    for ( var k = 0; k < liste[choix].length; k++ ) { 
        s3.length++;
        s3.options[s3.length-1].text=liste[choix][k]; 
    } 
}
</script>
 
</HEAD>
<BODY>
<form name="frm">
 
<select size=4 name="sel1" id="sel1" onchange="gensel2();">
    <optgroup label="Choisissez votre rubrique">
    <option>Sixième</option>
    <option>Cinquième</option>
    <option>Quatrième</option>
    <option>Troisième</option>
    </optgroup>
</select>
 
<select size=4 name="sel2" id="sel2" onchange="gensel3();">
    <optgroup label="Choisissez votre rubrique">
    </optgroup>
</select>
 
 
<select size=4 name="sel3" id="sel3">
    <optgroup label="Choisissez votre rubrique">
    </optgroup>
</select>
 
 
</form>
<script type="text/javascript">
var s1=document.getElementById("sel1");
var s2=document.getElementById("sel2"); 
var s3=document.getElementById("sel3"); 
 
var list=new Array(
    new Array("Numérique",5,"Géométrie",6),
    new Array("Numérique2",2,"Géométrie2",7),
    new Array("Numérique3",0,"Géométrie3",1, "latitude2",2, "longitude3",3),
    new Array("Numérique4",7,"Géométrie4",8)
);
 
var liste=new Array(
    new Array("..."),
    new Array("...."),
    new Array("non","Finistère","Ille-et-Vilaine","Morbihan"),
    new Array ("Priorités opératoires","Fractions","proportionnalité","Calcul littéral","Nombres relatifs","Statistiques"),
    new Array("à venir "),
    new Array("nombres relatifs","Fractions","Puissances","calul littéral","Equations","Proportionnalité"),
    new Array("but"),
    new Array("rien"),
    new Array("rien2")
);
</script>
 
 
</BODY></HTML>

A toi de lire le code pour comprendre

A+

menu déroulant javascript

JavaScript

Discussions similaires

Partager

Partager