3 Combobox (Listbox) en cascade la 3éme colonne ne s'affiche pas

**minogttao** · 03/11/2006, 20h21

Bonjour

Je souhaite proposé à l'utilisateur à l'aide de trois listbox de faire un choix descendant.

Le code suivant fonctionne mais je n'arrive pas à trouver pourquoi lorsque l'on clique dans le deuxiéme listbox rien ne s'affiche dans le troisiéme.

Question subsidiaire Peut on fixer la largeur des combobox pour qu'elle ne change pas en fonction du contenu ?

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
<html>
<head>
 
<script type="text/javascript">
<!--
var available_options = {};
available_options['meca1'] = new Array(
                                     'Moteur',
                                     'Haut moteur'
                                    );
available_options['carr1'] = new Array(
				     'voiture',
                                     'Units supérieurs avant'
                                    );
available_options['meca10'] = new Array(
                                        'moteur'
                                       );
available_options['meca11'] = new Array(
                                        'Joints moteur'
                                       );
available_options['carr10'] = new Array(
                                        'Caisse'
                                       );
available_options['carr11'] = new Array(
                                        'Capot'
                                       ); 
function loadSBOptions(selectbox1, selectBox)
{
selectBox.options.length = 0;
if(available_options[selectbox1])
{
for(i = 0; i < available_options[selectbox1].length; i++)
{
selectBox.options.add(new Option(available_options[selectbox1][i]));
}
}
else
{
}
}
-->
  </script>
</head>
<body onload="loadSBOptions(document.forms[0].selectbox1.options[document.forms[0].selectbox1.selectedIndex].value, document.forms[0].selectbox2);">
<body onload="loadSBOptions(document.forms[0].selectbox2.options[document.forms[0].selectbox2.selectedIndex].value, document.forms[0].selectbox3);">
<form method="post">
  <select name="selectbox1" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox2);">
  <option value="meca1">Mécanique</option>
  <option value="carr1">Carrosserie</option>
  </select>
 
  <select name="selectbox2" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox3);">
  <option value="meca10"> </option>
  <option value="meca11"> </option>
  <option value="carr10"> </option>
  <option value="carr11"> </option>
  <option value=""> </option>
  </select>
 
  <select name="selectbox3" size="20" onchange="">
  <option value=""> </option>
  </select>
</form>
 
</body>
</html>

**Bisûnûrs** · 04/11/2006, 00h09

Pourquoi tu as deux balises <body> ?

**minogttao** · 04/11/2006, 16h37

Un malheureux copier coller. J'ai rectifié mais j'ai toujours le même probléme.

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
<html>
<head>
 
<script type="text/javascript">
<!--
var available_options = {};
available_options['meca1'] = new Array(
                                     'Moteur',
                                     'Haut moteur'
                                    );
available_options['carr1'] = new Array(
				     'voiture',
                                     'Units supérieurs avant'
                                    );
available_options['meca10'] = new Array(
                                        'moteur'
                                       );
available_options['meca11'] = new Array(
                                        'Joints moteur'
                                       );
available_options['carr10'] = new Array(
                                        'Caisse'
                                       );
available_options['carr11'] = new Array(
                                        'Capot'
                                       ); 
function loadSBOptions(selectbox1, selectBox)
{
selectBox.options.length = 0;
if(available_options[selectbox1])
{
for(i = 0; i < available_options[selectbox1].length; i++)
{
selectBox.options.add(new Option(available_options[selectbox1][i]));
}
}
else
{
}
}
-->
  </script>
</head>
<body onload="loadSBOptions(document.forms[0].selectbox1.options[document.forms[0].selectbox1.selectedIndex].value, document.forms[0].selectbox2);"
onload="loadSBOptions(document.forms[0].selectbox2.options[document.forms[0].selectbox2.selectedIndex].value, document.forms[0].selectbox3);">
<form method="post">
  <select name="selectbox1" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox2);">
  <option value="meca1">Mécanique</option>
  <option value="carr1">Carrosserie</option>
  </select>
 
  <select name="selectbox2" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox3);">
  <option value="meca10"> </option>
  <option value="meca11"> </option>
  <option value="carr10"> </option>
  <option value="carr11"> </option>
  <option value=""> </option>
  </select>
 
  <select name="selectbox3" size="20" onchange="">
  <option value=""> </option>
  </select>
</form>
 
</body>
</html>

**Bisûnûrs** · 04/11/2006, 19h16

Tu ne peux pas avoir deux onload, sépare tes deux fonctions par un point-virgule ...

Exemple :

Code HTML :

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

<body onload="fonction1('gnia');fonction2('gnia2')">

**minogttao** · 05/11/2006, 10h22

Merci je ne savais pas que l'on ne peut pas utiliser deux onload. Toujours rien d'affiché dans le listbox 3 aprés correction, je me demande si je ne devrais pas tout reprendre à zéro sans les tableaux

.

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
<html>
<head>
 
<script type="text/javascript">
<!--
var available_options = {};
available_options['meca1'] = new Array(
                                     'Moteur',
                                     'Haut moteur'
                                    );
available_options['carr1'] = new Array(
				     'voiture',
                                     'Units supérieurs avant'
                                    );
available_options['meca10'] = new Array(
                                        'moteur'
                                       );
available_options['meca11'] = new Array(
                                        'Joints moteur'
                                       );
available_options['carr10'] = new Array(
                                        'Caisse'
                                       );
available_options['carr11'] = new Array(
                                        'Capot'
                                       ); 
function loadSBOptions(selectbox1, selectBox)
{
selectBox.options.length = 0;
if(available_options[selectbox1])
{
for(i = 0; i < available_options[selectbox1].length; i++)
{
selectBox.options.add(new Option(available_options[selectbox1][i]));
}
}
else
{
}
}
-->
  </script>
</head>
<body onload="loadSBOptions(document.forms[0].selectbox1.options[document.forms[0].selectbox1.selectedIndex].value, document.forms[0].selectbox2);loadSBOptions(document.forms[0].selectbox2.options[document.forms[0].selectbox2.selectedIndex].value, document.forms[0].selectbox3)">
<form method="post">
  <select name="selectbox1" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox2);">
  <option value="meca1">Mécanique</option>
  <option value="carr1">Carrosserie</option>
  </select>
 
  <select name="selectbox2" size="20" onchange="loadSBOptions(this.options[this.selectedIndex].value, this.form.selectbox3);">
  <option value="meca10"> </option>
  <option value="meca11"> </option>
  <option value="carr10"> </option>
  <option value="carr11"> </option>
  <option value=""> </option>
  </select>
 
  <select name="selectbox3" size="20" onchange="">
  <option value=""> </option>
  </select>
</form>
 
</body>
</html>

**Matthieu2000** · 06/11/2006, 16h06

la valeur dans la deuxième selectiones est

'Moteur',

et non

meca10

.

**minogttao** · 06/11/2006, 22h31

Corrigé mais toujours le même problème, je pense que je vais utiliser ce code que j'avais trouvé dans la faq javascript. Il correspond à ce que je veux faire à condition que je change la taille des combobox pour avoir des listbox.

http://javascript.developpez.com/faq...js#listesLiees

Mais je souhaiterais que lorsque la page se charge pour la première fois le contenu du deuxiéme et troisiéme listbox soient vides.

Je sais pas trop comment faire, la fonction raz peut être mais ou la mettre ?????

Merci pour les réponses

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
<head>
<script language="javascript">
var pays = new Array; //nouveau tableau
pays[0] = new Array("p0", "pays0"); //nouveau tableau, on va donc avoir pays[0][0]="p0"
pays[1] = new Array("p1", "pays1");
pays[2] = new Array("p2", "pays2");
 
var ville=new Array;
// pays0
ville["p0"] = new Array;
ville["p0"][0] = new Array("p0v0", "pays0-ville0");
ville["p0"][1] = new Array("p0v1", "pays0-ville1");
 
//pays1
ville["p1"]=new Array;
ville["p1"][0] = new Array("p1v0", "pays1-ville0");
ville["p1"][1] = new Array("p1v1", "pays1-ville1");
 
//pays2
ville["p2"] = new Array;
ville["p2"][0] = new Array("p2v0", "pays2-ville0");
ville["p2"][1] = new Array("p2v1", "pays2-ville1");
 
 
var rue = new Array;
//pays0-ville0
rue["p0v0"] = new Array;
rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0");
rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1");
 
//pays0-ville1
rue["p0v1"] = new Array;
rue["p0v1"][0] = new Array("p0v1r0", "pays0-ville1-rue0");
rue["p0v1"][1] = new Array("p0v1r1", "pays0-ville1-rue1");
rue["p0v1"][2] = new Array("p0v1r2", "pays0-ville1-rue2");
 
 
//pays1-ville0
rue["p1v0"] = new Array;
rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0");
rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1");
 
//pays1-ville1
rue["p1v1"] = new Array;
rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0");
rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1");
 
 
//pays2-ville0
rue["p2v0"] = new Array;
rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0");
rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1");
 
//pays1-ville1
rue["p2v1"] = new Array;
rue["p2v1"][0] = new Array("p2v1r0", "pays2-ville1-rue0");
rue["p2v1"][1] = new Array("p2v1r1", "pays2-ville1-rue1");
rue["p2v1"][2] = new Array("p2v1r2", "pays2-ville1-rue2");
function filltheselect(liste, choix)
{switch (liste)
   {
   case "listepays":
      raz("listeville");
      raz("listerue");
      for (i=0; i<ville[choix].length; i++)
         {
         new_option = new Option(ville[choix][i][1],ville[choix][i][0]);
         document.formu.elements["listeville"].
		 	options[document.formu.elements["listeville"].length]=new_option;
         }
      for (i=0; i<rue[choix+"v0"].length; i++)
         {
         new_option = new Option(rue[choix+"v0"][i][1],rue[choix+"v0"][i][0]);
         document.formu.elements["listerue"].options[document.formu.
		 	elements["listerue"].length]=new_option;
         }
      break;
   case "listeville":
      raz("listerue");
      for (i=0; i<rue[choix].length; i++)
         {
         new_option = new Option(rue[choix][i][1],rue[choix][i][0]);
         document.formu.elements["listerue"].options[document.formu.
		 	elements["listerue"].length]=new_option;
         }
      break;
   }
}
 
function raz(liste)
{l=document.formu.elements[liste].length;
for (i=l; i>=0; i--)
   document.formu.elements[liste].options[i]=null;
}
</script>
</head>
<body>
<form name="formu">
 
Choisir un pays
 
<select name="listepays" onChange='javascript:filltheselect(this.name, this.value)'>
   <script language="javascript">
   for (i=0; i<pays.length; i++)
      document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);
   </script>
</select>
<br>
 
Choisir une ville
<select name="listeville" onChange='javascript:filltheselect(this.name, this.value)'>
   <script language="javascript">
   for (i=0; i<ville["p0"].length; i++)
      document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]);
   </script>
</select>
 
<br>
 
Choisir une rue
<select name="listerue">
   <script language="javascript">
   for (i=0; i<rue["p0v0"].length; i++)
      document.write("<option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);
   </script>
</select>
 
</form>
</body>
</html>