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

Version imprimable

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.:roll:

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

Code:

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>

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

Pourquoi tu as deux balises <body> ?

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

Code:

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>

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

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

Exemple :

Code:

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

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:

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>

06/11/2006, 16h06
Matthieu2000

la valeur dans la deuxième selectiones est

Citation:

'Moteur',

et non

Citation:

meca10

.
:idea:

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.:roll: Je sais pas trop comment faire, la fonction raz peut être mais ou la mettre ?????

Merci pour les réponses

Code:

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>

07/11/2006, 14h17
Matthieu2000

vire les scripts à l'intérieur des tags

Citation:

select
08/11/2006, 22h44
minogttao

Merci à tous mon probléme est résolu grâce vous ;)