[DOM] Menu deroulant dependant des autre

Version imprimable

Bonjour gang

jaurai un petit probleme a vous soumettre: Je veux faire 3 menu deroulant dependant du premier; categorie, sous categorie et sous sous catégorie.
je vous montre le code

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
<SCRIPT language=JavaScript>
<!--
liste=new Array();
liste["<?=$deco['cat']?>"] = new Array("<?=$deco['scat']?>");
liste["Peinture"] = new Array("Sous-Peinture1", "Sous-Peinture2", "Sous-Peinture3", "Sous-Peinture4");
liste["Maquette"] = new Array("Sous-Maquette1", "Sous-Maquette2", "Sous-Maquette3", "Sous-Maquette4");
liste["Quincaillerie"] = new Array("Sous-Quincaillerie1", "Sous-Quincaillerie2", "Sous-Quincaillerie3", "Sous-Quincaillerie4");
listea=new Array();
listea["<?=$deco['scat']?>"] = new Array("<?=$deco['sscat']?>");
listea["Sous-Peinture1"] = new Array("Sous-Sous-Peinture1", "Sous-Sous-Peinture2", "Sous-Sous-Peinture3", "Sous-Sous-Peinture4");
listea["Sous-Peinture2"] = new Array("Sous-Sous-Peinture1,2", "Sous-Sous-Peinture2,2", "Sous-Sous-Peinture3,3,2", "Sous-Sous-Peinture4,2");
listea["Sous-Peinture3"] = new Array("Sous-Sous-Peinture1,3", "Sous-Sous-Peinture2,3", "Sous-Sous-Peinture3,3", "Sous-Sous-Peinture4,3");
listea["Sous-Peinture4"] = new Array("Sous-Sous-Peinture1,4", "Sous-Sous-Peinture2,4", "Sous-Sous-Peinture3,4", "Sous-Sous-Peinture4,4");
listea["Sous-Maquette1"] = new Array("Sous-Sous-Maquette1", "Sous-Sous-Maquette2", "Sous-Sous-Maquette3", "Sous-Sous-Maquette4");
listea["Sous-Maquette2"] = new Array("Sous-Sous-Maquette1,2", "Sous-Sous-Maquette2,2", "Sous-Sous-Maquette3,3,2", "Sous-Sous-Maquette4,2");
listea["Sous-Maquette3"] = new Array("Sous-Sous-Maquette1,3", "Sous-Sous-Maquette2,3", "Sous-Sous-Maquette3,3", "Sous-Sous-Maquette4,3");
listea["Sous-Maquette4"] = new Array("Sous-Sous-Maquette1,4", "Sous-Sous-Maquette2,4", "Sous-Sous-Maquette3,4", "Sous-Sous-Maquette4,4");
listea["Sous-Quincaillerie1"] = new Array("Sous-Sous-Quincaillerie1", "Sous-Sous-Quincaillerie2", "Sous-Sous-Quincaillerie3", "Sous-Sous-Quincaillerie4");
listea["Sous-Quincaillerie2"] = new Array("Sous-Sous-Quincaillerie1,2", "Sous-Sous-Quincaillerie2,2", "Sous-Sous-Quincaillerie3,3,2", "Sous-Sous-Quincaillerie4,2");
listea["Sous-Quincaillerie3"] = new Array("Sous-Sous-Quincaillerie1,3", "Sous-Sous-Quincaillerie2,3", "Sous-Sous-Quincaillerie3,3", "Sous-Sous-Quincaillerie4,3");
listea["Sous-Quincaillerie4"] = new Array("Sous-Sous-Quincaillerie1,4", "Sous-Sous-Quincaillerie2,4", "Sous-Sous-Quincaillerie3,4", "Sous-Sous-Quincaillerie4,4");
function changeliste()
{
choix=document.getElementById("cat").value;
t='<select name="scat" id="scat">';
for(i=0;i<liste[choix].length;i++)
{
t+="<option value=\""+liste[choix][i]+"\">"+liste[choix][i]+"</option>";
}
document.getElementById("scat_div").innerHTML=t+'</select>';
}
 
 
function changelistea()
{
choix2=document.getElementById("scat").value;
t='<select name="sscat" id="sscat">';
for(i=0;i<listea[choix2].length;i++)
{
t+="<option value=\""+listea[choix2][i]+"\">"+listea[choix2][i]+"</option>";
}
document.getElementById("sscat_div").innerHTML=t+'</select>';
}
 
-->
</SCRIPT>

et ensuite

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <tr>
  <td>Secteur</div></td>
  <td><DIV><A><SELECT id="cat" onchange="changeliste()" name="cat">
    <option value="<?=$deco['cat']?>"><?=$deco['cat']?></option>
    <option value="Peinture">Peinture</option>
    <option value="Maquette">Maquette</option>
    <option value="Quincaillerie">Quincaillerie</option>
    </select>
</A><br />
<A id="scat_div">
<SELECT id="scat" name="scat" onchange="changelistea()">
<OPTION selected><?=$deco["scat"]?></OPTION>
</SELECT>
</A><br />
<A id="sscat_div">
<SELECT id="sscat" name="sscat">
<OPTION selected><?=$deco["sscat"]?></OPTION>
</SELECT>
</A>
</DIV></td>
</tr>

le premier avec le 2e menu ca marche mais le 3e reste tjs inactif!

je croit a un conflie de variable mais pourtant...

merci

18/07/2007, 07h44
Bisûnûrs

C'est surtout que tu utilises innerHTML pour créer tes éléments dans la page. Tu ne peux pas accéder à ces éléments nouvellement créés avec innerHTML ..

Je te conseille d'utiliser le DOM plutôt, tu auras une page propre et tu pourras accéder à tes éléments.

Je te renvoie à la FAQ Javascript qui te donnera la solution.

Bonjour Bisûnûrs

Jai regarder ce que tu ma donner mais le petit ick: il faut que j'inscrive les donnée dans une BDD

le java

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
<script language="javascript">
var cat = new Array; //nouveau tableau
cat[0] = new Array("p0", "Peinture"); 
cat[1] = new Array("p1", "Maquette");
cat[2] = new Array("p2", "Quincaillerie");
 
var scat=new Array;
// cat0
scat["p0"] = new Array;
scat["p0"][0] = new Array("p0v0", "sous-peinture1");
scat["p0"][1] = new Array("p0v1", "sous-peinture2");
 
//cat1
scat["p1"]=new Array;
scat["p1"][0] = new Array("p1v0", "Sous-Maquette1");
scat["p1"][1] = new Array("p1v1", "Sous-Maquette2");
 
//cat2
scat["p2"] = new Array;
scat["p2"][0] = new Array("p2v0", "Sous-Quincaillerie1");
scat["p2"][1] = new Array("p2v1", "Sous-Quincaillerie2");
 
 
var sscat = new Array;
//cat0-scat0
sscat["p0v0"] = new Array;
sscat["p0v0"][0] = new Array("p0v0r0", "Sous-sous-peinture1-1");
sscat["p0v0"][1] = new Array("p0v0r1", "Sous-sous-peinture1-2");
 
//cat0-scat1
sscat["p0v1"] = new Array;
sscat["p0v1"][0] = new Array("p0v1r0", "Sous-sous-peinture2-1");
sscat["p0v1"][1] = new Array("p0v1r1", "Sous-sous-peinture2-2");
sscat["p0v1"][2] = new Array("p0v1r2", "Sous-sous-peinture2-3");
 
 
//cat1-scat0
sscat["p1v0"] = new Array;
sscat["p1v0"][0] = new Array("p1v0r0", "Sous-Sous-Maquette1-1");
sscat["p1v0"][1] = new Array("p1v0r1", "Sous-Sous-Maquette1-2");
 
//cat1-scat1
sscat["p1v1"] = new Array;
sscat["p1v1"][0] = new Array("p1v1r0", "Sous-Sous-Maquette2-1");
sscat["p1v1"][1] = new Array("p1v1r1", "Sous-Sous-Maquette2-2");
 
 
//cat2-scat0
sscat["p2v0"] = new Array;
sscat["p2v0"][0] = new Array("p2v0r0", "Sous-Sous-Quincaillerie1-1");
sscat["p2v0"][1] = new Array("p2v0r1", "Sous-Sous-Quincaillerie1-2");
 
//cat1-scat1
sscat["p2v1"] = new Array;
sscat["p2v1"][0] = new Array("p2v1r0", "Sous-Sous-Quincaillerie2-1");
sscat["p2v1"][1] = new Array("p2v1r1", "Sous-Sous-Quincaillerie2-2");
sscat["p2v1"][2] = new Array("p2v1r2", "Sous-Sous-Quincaillerie2-3");
function filltheselect(liste, choix)
{switch (liste)
   {
   case "listecat":
      raz("listescat");
      raz("listesscat");
      for (i=0; i<scat[choix].length; i++)
         {
         new_option = new Option(scat[choix][i][1],scat[choix][i][0]);
         document.Produits.elements["listescat"].
		 	options[document.Produits.elements["listescat"].length]=new_option;
         }
      for (i=0; i<sscat[choix+"v0"].length; i++)
         {
         new_option = new Option(sscat[choix+"v0"][i][1],sscat[choix+"v0"][i][0]);
         document.Produits.elements["listesscat"].options[document.Produits.
		 	elements["listesscat"].length]=new_option;
         }
      break;
   case "listescat":
      raz("listesscat");
      for (i=0; i<sscat[choix].length; i++)
         {
         new_option = new Option(sscat[choix][i][1],sscat[choix][i][0]);
         document.Produits.elements["listesscat"].options[document.Produits.
		 	elements["listesscat"].length]=new_option;
         }
      break;
   }
}
 
function raz(liste)
{l=document.Produits.elements[liste].length;
for (i=l; i>=0; i--)
   document.Produits.elements[liste].options[i]=null;
}
</script>

les variables retournées sont p0 p0v0r0 aulieu de peinture sous-peinture et sous-sous-peinture

je pourrai les changer mais le code pour faire apparettre dans le formulaire

Code:

1
2
3
4
5
6
<select name="listecat" onChange='javascript:filltheselect(this.name, this.value)'>
   <script language="javascript">
   for (i=0; i<cat.length; i++)
      document.write("<option value=\"" +cat[i][0]+ "\">" +cat[i][1]);
   </script>
</select>

il a une chaine logique pour quil sajoute facilement!

any idea?

une autre chose aussi, je peut garder les truc p0v0r0 mais quand arrive le temps de faire des changement dans la base de donner ca affiche rien dans mon formulaire
Code:

1 2 3 4 5 6 <select name="listesscat"> <script language="javascript"> for (i=0; i<sscat["p0v0"].length; i++) document.write("<option value=\"" +sscat["p0v0"][i][0]+ "\">" +sscat["p0v0"][i][1]); </script> </select>
normalment jaurais mit un truc comme

Code:

<?=$produit['cat']?>

mais ou et comment

aidez moi!!

18/07/2007, 23h35
Bisûnûrs
Mais c'est super moche le document.write ou l'ajout d'élements comme ça ..

Tu peux utiliser le PHP sans problème :
Code:

1 2 3 4 5 6 <select name="listesscat"> <?php for($i = 0; $i < $nbp0v0; $i++){ ?> <option value="<?php echo $sscat['p0v0'] ?>"><?php echo $sscat['p0v0'] ?></option> <?php } ?> </select>
Ce n'est qu'une ébauche, à toi d'adapter en fonction de tes variables hein.
19/07/2007, 20h27
HWICE

ca ne marche pas :(