[DOM] Menu deroulant dependant des autre

**HWICE** · 17/07/2007, 22h11

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 :

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

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
 <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

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

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.

**HWICE** · 18/07/2007, 16h34

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 :

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

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

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?

**HWICE** · 18/07/2007, 17h43

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 :

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

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 :

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

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

mais ou et comment

aidez moi!!

**Bisûnûrs** · 18/07/2007, 23h35

Mais c'est super moche le document.write ou l'ajout d'élements comme ça ..

Tu peux utiliser le PHP sans problème :

Code html :

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

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.

**HWICE** · 19/07/2007, 20h27

ca ne marche pas

[DOM] Menu deroulant dependant des autre

JavaScript

Discussions similaires

Partager

Partager