Discussion :

[nemonux]

Bonjour,

je souhaiterais trouver un moyen simple de superposer une liste déroulante.
Le but est d'afficher telle ou telle liste selon l'item sélectionné dans une précédente liste.

EX:
Liste1 (mammifère, oiseaux, ...)
Liste2 (chien, chat, ours, ...)
Liste3 (mésange, rouge-gorge, roitelet, ...)

Si dans liste1 "mammifère" est sélectionné, je dois afficher la liste2, si c'est "oiseaux", je dois afficher la liste3 à la place de la 2 (au même endroit !!)

Je ne sais absolument pas comment faire. Si vous avez une quelconque idée ... Merci.

[NoSmoking]

Bonjour,
ton problème est un problème de liste déroulante liées entre elles, voilà pour les mots clés.

Comment lier deux listes déroulantes entre elles ?

[nemonux]

Bonjour,

merci pour la réponse et le lien.

J'ai lu la FAQ, mais pour cette solution il est nécessaire d'adapter la base de données, or je ne peux pas le faire. Ma base de données est existante, et je dois l'utiliser telle quelle pour construire mes listes déroulantes.

Je pencherais plus pour une solution basée sur l'affichage d'une liste ou une autre selon l'item sélectionné (c'est dans ce sens que je parlais de "superposition de listes"). J'ai vaguement regardé du côté des z-index, mais je ne n'ai rien trouvé de concluant.

[SpaceFrog]

Le tuto n'est qu'un exemple, tu n'as nullement besoin d'adapter ta base de données ...

regarde plutot du coté de ajax, voire même jquery qui propose un plugin de listes liées ...

[nemonux]

Le soucis c'est que je débute complètement.
J'ai déjà du me farcir le HTML, le CSS, le PHP, le MySQL, le Javascript et je pensais que ce serais suffisant.
Ça m’ennuie de devoir encore essayer d'apprivoiser l'ajax ou le jquery, alors que je suis encore loin de maîtriser les autres langages.
N'y a t-il pas d'autre choix ...!??

[NoSmoking]

Si tu ne veux pas de donner la peine et que les données sont peu nombreuses tu peux créer tes SELECTs et les masquer, display:none par exemple, il te suffit ensuite de les afficher à la demande sur le onchange du SELECT principal.

[nemonux]

Oui c'est ce que j'aimerais faire, le soucis c'est que j'aimerais que les différentes listes soient au même endroit.
Je ne suis pas sur qu'on puisse le faire avec l'option display.

Par ailleurs j'ai un peu cherché des infos sur les liste liées. Je confirme que cela ne correspond pas mon pb, j'ai oublié de préciser que selon le champ sélectionné dans ma 1ère liste, je dois afficher (ou non) d'autre listes, toutes issues d'autres tables n'ayant aucun lien avec ma 1ère liste.

[NoSmoking]

...les différentes listes soient au même endroit.

effectivement display dans ce cas ne peut rien pour toi car il s'agit de positionnement

Je confirme que cela ne correspond pas mon pb, j'ai oublié de préciser que selon le champ sélectionné dans ma 1ère liste, je dois afficher (ou non) d'autre listes, toutes issues d'autres tables n'ayant aucun lien avec ma 1ère liste.

Le fond du problème est identique.

[nemonux]

Oui peut-être. Je continu mes recherches ...
Mais si quelqu'un a une solution simple, je suis preneur !!

[NoSmoking]

Une solution simple est de créer tout tes SELECTs et de les masquer, tiens il me semble l'avoir déjà écris
exemple :

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
<select>
  <option value="">Votre choix</option>
  <option value="id_un">UN</option>
  <option value="id_deux">DEUX</option>
  <option value="id_trois">TROIS</option>
</select>
<select id="id_un">
  <option value="">UN UN</option>
  <option value="">UN DEUX</option>
  <option value="">UN TROIS</option>
</select>
<select id="id_deux">
  <option value="">DEUX UN</option>
  <option value="">DEUX DEUX</option>
  <option value="">DEUX TROIS</option>
</select>
<select id="id_trois">
  <option value="">TROIS UN</option>
  <option value="">TROIS DEUX</option>
  <option value="">TROIS TROIS</option>
</select>

...et les masquer, display:none par exemple,

Code :

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

1
2
3
4
5
6
7
// récup. des SELECTs concernés
var oSelect = document.getElementsByTagName('SELECT'),
    nbSelect = oSelect.length;
// on laisse le premier apparaître
for( var i=1; i <nbSelect;i++){
  oSelect[i].style.display = 'none';
}

...il te suffit ensuite de les afficher à la demande sur le onchange du SELECT principal.

Code :

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

1
2
3
4
5
oSelect[0].onchange = function(){
  for( var i=1; i <nbSelect;i++){
    oSelect[i].style.display = oSelect[i].id == this.value ? '' : 'none';
  }
};

on se sert de la value de celui ci, qui représente l'ID, pour atteindre et rendre visible le SELECT concerné.

Mais si quelqu'un a une solution simple, je suis preneur !!

il me semble que c'est le cas !!

[nemonux]

OK, mais on est bien d'accord que dans ce cas là, les listes (visibles ou non) sont affichées à des endroits différents.
Mon souhait serait qu'elles le soient au même.

[numew]

Si tu souhaite que le seconde liste remplace la première lors du choix il te suffit alors de masquer la première pour que la seconde apparaisse au même endroit. Ce ne devrait pas être difficile à faire avec le code fournit.

[nemonux]

T'as raison numew, je me suis trompé.
Merci NoSmoking, ça marche nickel. C'est exactement ce que je voulais.

Par contre je ne sais pas comment on clôture la discussion en "résolu".... (je débute dans tout, la prog et les forums )

...


wouahou , je viens de voir le bouton !! Je clôture donc ...

Merci à tous.