Rendre une liste visible avec Javascript

**will89** · 13/08/2008, 12h00

Bonjour, je travaille actuellement sur un moteur de recherche de vêtements. J'ai ue liste de catégories , toutes reliées à des checkboxs pour les activer et à une liste de sous-catégories. Je voudrais que quand on coche une catégorie, la liste de sous-catégories correspondante se déroule. Voici donc mon code, qui marche sous FF mais pas IE

La fonction Javascript

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
      function derouleSousCat (ul,checkbox)
      {
        // on masque toutes les listes de sous-catégories
        elem = document.getElementsByClassName('cat_fille');
        for (i=0;i<elem.length;i++) {
          elem[i].style.display = 'none';
        }
        // on coche toutes les sous-catégories concernées
        ch = document.getElementsByName(checkbox)
        for (i=0;i<ch.length;i++) {
          if (!ch[i].checked) ch[i].checked = true;
        }
        // on affiche celle qu'il faut dérouler
        document.getElementById(ul).style.display = 'block';
        // puis on équilibre les hauteurs au cas ou
        var h_gauche = document.getElementById("bloc_gauche_wall").clientHeight;
        var h_centre = document.getElementById("bloc_centre").clientHeight;
        if (h_gauche > h_centre) document.getElementById("bloc_centre").style.height = h_gauche + "px";
        else document.getElementById("bloc_gauche_wall").style.height = h_centre + "px";
      }

Et un bout de ma page HTML (... pour dire qu'il y a d'autres catégories construites de la même manière) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul class="cat_mere">
  <li><input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onchange="derouleSousCat('fille_103','ss_categ_103_coches[]')" />&nbsp;<label for="categ_coches_103">Accessoires</label>
    <ul class="cat_fille" id="fille_103">
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_1" value="1" />&nbsp;<label for="ss_categ_coches_1">Bonnets - Gants</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_2" value="2" />&nbsp;<label for="ss_categ_coches_2">Echarpes - Foulards</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_3" value="3" />&nbsp;<label for="ss_categ_coches_3">Ceintures</label></li>
      <li><input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_4" value="4" />&nbsp;<label for="ss_categ_coches_4">Gifts</label></li>
    </ul>
  </li>
 
  ......
 
</ul>

PS : je mets l'évènement onchange pour gérer l'appel de ma fonction, mais ça ne devrait pas poser de problèmes, alors je me dis que peut-être c'est la fonction getElementsByClassName qui n'existe pas...

**Auteur** · 13/08/2008, 12h27

Envoyé par will89

PS : je mets l'évènement onchange pour gérer l'appel de ma fonction, mais ça ne devrait pas poser de problèmes, alors je me dis que peut-être c'est la fonction getElementsByClassName qui n'existe pas...

Justement utilise l'événement onclick sur ton input pas onchange (réserve onchange pour les select). Quant à la méthode document.getElementsByClassName, elle n'existe pas.
Tu as :
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName() à éviter car FF la considère comme dépréciée

**will89** · 13/08/2008, 15h01

J'ai opéré quelques changements en suivant tes conseils mais le résultat n'est pas très probant...

Vous pouvez le voir ici... (nickel sous Firefox, les soucis arrivent avec IE7 et j'ai aps encore testé sur le IE6)

Voici mon nouveau javascript :

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
      // fonction pour dérouler la liste des sous_catégories
      function derouleSousCat (ul,checkbox)
      {
        // on masque toutes les listes de sous-catégories
        var elem = new Array("fille_103", "fille_3", "fille_25", "fille_30", "fille_102", "fille_34", "fille_12", "fille_13", "fille_112", "fille_15", "fille_16", "fille_17", "fille_9", "fille_21", "fille_22");
        for (i=0;i<elem.length;i++) {
          document.getElementById(elem[i]).style.display = 'none';
        }
        // on coche toutes les sous-catégories concernées
        ch = document.getElementsByName(checkbox)
        for (i=0;i<ch.length;i++) {
          if (!ch[i].checked) ch[i].checked = true;
        }
        // on affiche celle qu'il faut dérouler
        document.getElementById(ul).style.display = 'block';
        // puis on équilibre les hauteurs au cas ou
        var h_gauche = document.getElementById("bloc_gauche_wall").clientHeight;
        var h_centre = document.getElementById("bloc_centre").clientHeight;
        if (h_gauche > h_centre) document.getElementById("bloc_centre").style.height = h_gauche + "px";
        else document.getElementById("bloc_gauche_wall").style.height = h_centre + "px";
      }

et le code HTML n'a pas changé (simplement grâce au PHP, je crée un tableau qui contient tous les Id à traiter => le tableau elem dans la fonction JS et j'ai mis onclick au lieu de onchange pour appeler la fonction mais ça ne change pas grand chose)

**Katachana** · 13/08/2008, 15h38

Il me semble que

Code :

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

'block'

ne marche pas sous IE

Essaye comme cela :

Code :

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

1
2
3
4
5
6
7
// on affiche celle qu'il faut dérouler
//IE
		if(document.all){
        document.getElementById(ul).style.display = "";
} else {
document.getElementById(ul).style.display = "block";
}

**Auteur** · 13/08/2008, 15h48

je te propose une variante :

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.cat_fille{
  display: none;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
function derouleSousCat(listeFille,chkParent)
{
  var liste = document.getElementById(listeFille);
  var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée
  var i;
  
  if (chkParent.checked)  // input parent coché ?
  {
    liste.style.display = "block";
  }
  else
  {
    liste.style.display = "none";
  }
  
  for (i=0; i<listeChk.length; i++)
  {
    listeChk[i].checked = chkParent.checked;  // les input de la liste fille prennent le même statut que le parent
  }
  
}
//-->
</script>
 
</head>
 
<body>
 
<ul class="cat_mere">
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onclick="derouleSousCat('fille_103', this)" />&nbsp;<label for="categ_coches_103">Accessoires</label>
    <ul class="cat_fille" id="fille_103">
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_1" value="1" />&nbsp;<label for="ss_categ_coches_1">Bonnets - Gants</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_2" value="2" />&nbsp;<label for="ss_categ_coches_2">Echarpes - Foulards</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_3" value="3" />&nbsp;<label for="ss_categ_coches_3">Ceintures</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_103_coches[]" id="ss_categ_coches_4" value="4" />&nbsp;<label for="ss_categ_coches_4">Gifts</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_3" value="3" onclick="derouleSousCat('fille_3',this)" />&nbsp;<label for="categ_coches_3">Bijoux</label>
    <ul class="cat_fille" id="fille_3">
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_5" value="5" />&nbsp;<label for="ss_categ_coches_5">Boucles d'oreilles</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_6" value="6" />&nbsp;<label for="ss_categ_coches_6">Bracelets</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_7" value="7" />&nbsp;<label for="ss_categ_coches_7">Colliers - Sautoirs</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_8" value="8" />&nbsp;<label for="ss_categ_coches_8">Divers</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_3_coches[]" id="ss_categ_coches_64" value="64" />&nbsp;<label for="ss_categ_coches_64">Bagues</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_25" value="25" onclick="derouleSousCat('fille_25', this)" />&nbsp;<label for="categ_coches_25">Blouses</label>
    <ul class="cat_fille" id="fille_25">
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_9" value="9" />&nbsp;<label for="ss_categ_coches_9">Courtes</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_10" value="10" />&nbsp;<label for="ss_categ_coches_10">Longues</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_25_coches[]" id="ss_categ_coches_11" value="11" />&nbsp;<label for="ss_categ_coches_11">Imprimées</label>
      </li>
    </ul>
  </li>
 
  <li>
    <input type="checkbox" name="categ_coches[]" id="categ_coches_30" value="30" onclick="derouleSousCat('fille_30',this)" />&nbsp;<label for="categ_coches_30">Caleçons</label>
    <ul class="cat_fille" id="fille_30">
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_12" value="12" />&nbsp;<label for="ss_categ_coches_12">Collants</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_13" value="13" />&nbsp;<label for="ss_categ_coches_13">Leggings courts</label>
      </li>
      <li>
        <input type="checkbox" name="ss_categ_30_coches[]" id="ss_categ_coches_14" value="14" />&nbsp;<label for="ss_categ_coches_14">Leggings longs</label>
      </li>
    </ul>
  </li>
 
</ul>
 
 
</body>
</html>

Explications :
Le second paramètre de ta fonction

Code :

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

derouleSousCat(ul,checkbox)

n'est plus le name des checkbox de ta liste à dérouler, mais l'input qui appelle la fonction (désigné par le mot-clef this):

Code html :

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

1
2
 
<input type="checkbox" name="categ_coches[]" id="categ_coches_103" value="103" onclick="derouleSousCat('fille_103', this)" />&nbsp;<label for="categ_coches_103">Accessoires</label>

Le premier paramètre est toujours l'id de la liste à dérouler.

Puis dans la fonction je recherche tous les input de la liste enfant à afficher :

Code :

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

1
2
3
 
var liste = document.getElementById(listeFille);
  var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée

Puis je réalise une boucle qui coche ou décoche tous les input de la liste enfant en fonction du statut de l'input qui a appelé la fonction :

Code :

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

1
2
3
4
5
 
 for (i=0; i<listeChk.length; i++)
  {
    listeChk[i].checked = chkParent.checked;  // les input de la liste fille prennent le même statut que le parent
  }

**will89** · 13/08/2008, 16h37

Pinaise, ce code est nickel... Je l'ai repris, simplement j'y ai rajouté la disparition de toutes les listes filles au début de la fonction...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
      function derouleSousCat(listeFille,chkParent)
      {
      // on récupère les éléments nécessaires
        var liste = document.getElementById(listeFille);
        var listeChk = liste.getElementsByTagName("input"); // tous les input de la liste fille sélectionnée
      // on masque toutes les listes de sous-catégories
        var elem = new Array("fille_103", "fille_3", "fille_25", "fille_30", "fille_102", "fille_34", "fille_12", "fille_13", "fille_112", "fille_15", "fille_16", "fille_17", "fille_9", "fille_21", "fille_22"); // tableau généré par PHP
        for (var i=0;i<elem.length;i++) document.getElementById(elem[i]).style.display = 'none';
      // on affiche la liste fille qu'il faut dérouler ou on la replie selon l'état de la checkbox mère
        if (chkParent.checked) liste.style.display = "block";
        else liste.style.display = "none";
      // les input de la liste fille prennent le même statut que la checkbox mère
        for (i=0; i<listeChk.length; i++) listeChk[i].checked = chkParent.checked;
      }

**will89** · 13/08/2008, 15h48

Autant pour moi... J'avais encore le onchange, en passant à onclick IE réagis beaucoup mieux...

Quand au display:block ,il passe très bien sous IE...

Merci à vous..

Rendre une liste visible avec Javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager