Comment réaliser une liste déroulante à deux niveaux !?

**Dubbiker** · 30/06/2007, 16h21

Bonjour à tous.
Jusqu'à présent je lisais toujours vos précieuses réponses sans m'etre inscris mais voila qui est fait.

Je voudrais savoir comment créer une liste déroulante avec une arborescence a l'intérieur.
Je m'explique
Ma liste déroulante a pour but la sélection d'un LIEN. Dans ma base de données il y a plusieurs liens qui sont regroupés en differentes catégories.

L'objectif est donc d'avoir une liste déroulante ou figurent nom des catégories puis les liens qui s'y rapportent et qui sont selectionnables!

Liste déroulante :

Cat1
-----
>Lien1
>Lien2
>Lien3

Cat2
------
>Lien1
>Lien2
>Lien3

J'espere que vous avez compris ce que je désirais! Je n'y arrive pas du tout
meme si je sais qu'il faut surement utiliser <select> </select>

Merci d'avance!

**Auteur** · 30/06/2007, 18h39

bonjour,

deux possibilités :

utiliser la balise optgroup :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<select size="1" id="combo">
  <optgroup label="Catégorie 1">
    <option value="url_11">Lien 1</option>
    <option value="url_12">Lien 2</option>
    <option value="url_13">Lien 3</option>
  </optgroup>
  <optgroup label="Catégorie 2">
    <option value="url_21">Lien 1</option>
    <option value="url_22">Lien 2</option>
    <option value="url_23">Lien 3</option>
  </optgroup>
</select>

malheureusement, je crois que IE ne la reconnait pas

ou encore :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<select size="1" id="combo">
    <option value="" selected="selected" >Catégorie 1</option>
    <option value="url_11">&nbsp;&nbsp;&nbsp;Lien 1</option>
    <option value="url_12">&nbsp;&nbsp;&nbsp;Lien 2</option>
    <option value="url_13">&nbsp;&nbsp;&nbsp;Lien 3</option>
    <option value="">Catégorie 2</option>
    <option value="url_21">&nbsp;&nbsp;&nbsp;Lien 1</option>
    <option value="url_22">&nbsp;&nbsp;&nbsp;Lien 2</option>
    <option value="url_23">&nbsp;&nbsp;&nbsp;Lien 3</option>
 
</select>

Inconvénient : les titres ("catégorie 1" et "catégorie2") peuvent être sélectionnés (il te faudra donc gérer ces cas là)
Pour faire des retraits ajoute des espaces insécables :  

**Dubbiker** · 30/06/2007, 22h02

Merci bien, je vais tester ça, si j'ai un problème je resposterai

**blueice** · 01/07/2007, 08h49

Suffit de faire une liste dl dt dd

Code html :

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

1
2
3
4
5
6
7
8
9
10
<dl>
    <dt>Catégorie 1</dt>
      <dd>Lien 1</dd>
      <dd>Lien 2</dd>
      <dd>Lien 3</dd>
    <dt>Catégorie 2</dt>
      <dd>Lien 1</dd>
      <dd>Lien 2</dd>
      <dd>Lien 3</dd>
</dl>

Ca peut-être aussi géré en Javascript pour ouvrir et fermer les catégories...

**Bisûnûrs** · 01/07/2007, 11h33

Envoyé par Auteur

malheureusement, je crois que IE ne la reconnait pas

Si si, IE la reconnaît très bien.

C'est l'attribut disabled sur les option qu'il ne reconnaît pas.

**Auteur** · 01/07/2007, 11h51

pour complèter la solution de blueice (j'utilise des listes ul et li au lieu de dl,dd,dt, mais le principe est le même

):

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<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">
<!--
.conteneur{
 height: 250px;
 width: 200px;
 border: 5px #AAAAAA ridge;
 background-color: #CCCCCC;
 overflow: auto;
 padding: 5px;
}
.clListe{
 display: none;
 list-style-type: decimal;
}
.item{
 cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldObj = null;
function gestionListe(idObj)
{
  var liste = document.getElementById(idObj);
 
  if (oldObj==liste && liste.style.display!="block")
     oldObj = null;
 
  liste.style.display = "block";
 
  if (oldObj!=null)
     oldObj.style.display = "none";
 
  oldObj = liste;
}
 
 
//-->
</script>
 
</head>
 
<body>
<div class="conteneur">
 
<span class="item" onclick="gestionListe('liste1')">Afficher liste 1</span><br />
<ul class="clListe" id="liste1">
<li><a href="page1.htm">Item 1</a></li>
<li><a href="page2.htm">Item 2</a></li>
<li><a href="page3.htm">Item 3</a></li>
</ul>
 
<span class="item" onclick="gestionListe('liste2')">Afficher liste 2</span><br />
<ul  class="clListe" id="liste2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
 
<span class="item" onclick="gestionListe('liste3')">Afficher liste 3</span><br />
<ul  class="clListe" id="liste3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
 
<span class="item" onclick="gestionListe('liste4')">Afficher liste 4</span><br />
<ul  class="clListe" id="liste4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</div>
 
</body>
 
</html>