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";
}

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

**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;
      }

**Auteur** · 13/08/2008, 16h51

Envoyé par will89

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

euh je ne vois pas trop l'intérêt

J'ai mis un display:none dans la feuille de style.

**will89** · 14/08/2008, 11h32

Certes, moi aussi j'ai un display:none, mais une fois que la liste a été déroulée, il faut aussi la replier quand on en ouvre une autre.. C'est la que le bout de code que j'ai rajouté est utilisé...

**Auteur** · 14/08/2008, 12h28

Envoyé par will89

Certes, moi aussi j'ai un display:none, mais une fois que la liste a été déroulée, il faut aussi la replier quand on en ouvre une autre.. C'est la que le bout de code que j'ai rajouté est utilisé...

C'est là que se trouve le bug : si je veux re-dérouler la liste, je suis obligé de cliquer à nouveau sur l'input ce qui a pour effet de décocher tous les éléments de la liste.

A mon avis il serait plus ergonomique de laisser la liste déroulée si la checkbox parent est cochée et de la cacher si la checkobox parent est décochée, quitte à gérer l'overflow sur le div conteneur.

**will89** · 14/08/2008, 16h02

Effectivement, mais cela dit c'est assez discutable, car je n'ai pas trois catégories mais quinze, et jusqu'à huit sous-catégories dans chaque. Ce que fait qui si le client déroule tout, la liste risque d'être très longue...

Mais je vais tout de même essayer...

Merci pour le coup de main

Edit à 16h32 :

Voici ce que donne ma fonction en prenant compte ta remarque (je regarde l'etat de la checkbox mere, et en fonction, je masque ou j'affiche la liste déroulante)

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
      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 décochés
        var elem = new Array("103", "3", "25", "30", "102", "34", "12", "13", "112", "15", "16", "17", "9", "21", "22"); // tableau généré par PHP
        for (var i=0;i<elem.length;i++)
        {
          if (document.getElementById('categ_coches_' + elem[i]).checked)  document.getElementById('fille_' + elem[i]).style.display = 'block'; // on affiche
          if (!document.getElementById('categ_coches_' + elem[i]).checked) document.getElementById('fille_' + elem[i]).style.display = 'none';  // on masque
        }
      // 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;
      // 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;
        var h_max = Math.max(h_gauche, h_centre);
        document.getElementById("bloc_gauche_wall").style.height = h_max + "px";
        document.getElementById("bloc_centre").style.height = h_max + "px";
      }

Edit à 16:37

En fait, parcourir les checkboxs pour masquer les listes ne sert a rien
Voici donc la fonction finale (qui correspond exactement à ce que Auteur a fait, un grand merci à lui)...

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
      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 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;
      // 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;
        var h_max = Math.max(h_gauche, h_centre);
        document.getElementById("bloc_gauche_wall").style.height = h_max + "px";
        document.getElementById("bloc_centre").style.height = h_max + "px";
      }

Et finalement, pour éviter que la page ne se déroule sans fin, j'ai mis les catégories dans un bloc de taille fixe avec un scrolling vertical

Code :

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

overflow-y:auto

**will89** · 14/08/2008, 16h44

Maintenant j'ai un autre problème pour lequel j'ai créé un topic spécifique, seulement j'ai pas eu de réponse... Au risque d'être un peu lourd, je vous mets le lien..

Mauvaise éxecution d'Ajax sous IE seulement ?!?!

Rendre une liste visible avec Javascript

JavaScript

Discussions similaires

Partager

Partager