[HTML] liste déroulante dynamique

**lacousinee** · 04/08/2005, 18h41

Bonjour j'ai une liste déroulante d'ou je choisi une catégorie et je veux faire afficher le contenu de cette catégorie dans une liste déroulante qui changera à chaque fois que la catégorie change. Mon problème est l'affichage je veux absolument que ma 1ere liste reste afficher et que ma 2ième soit a un endroit fixe et change .. Faite fonctionner le code et vous allez comprendre.. présentement quand je choisi un autre choix dans la 1ere liste ca affiche les 3 sous-catégorie et j'aimerais voir 1 seul sous-catégorie à la fois.

voici mon code

<title>Untitled</title>
</head>
<body onload="document.form.liste.onchange();">
<form name="form">
<select name="liste" onchange="o=this.selectedIndex;document.getElementById(this.options[o].value).style.display='block';document.getElementById(this.options[(o==0?1:0)].value).style.display='none';">
<option name="M" value="musique">art musical</option>
<option name="V" value="visuel">art visuel</option>
<option name="S" value="scene">art de la scene</option>
</select>
</form>
<table height="30" border="1" cellpadding="0" cellspacing="0">
<tr><th height="28">Sous-Categories</th></tr>
<tr>
<form>
<div style="display:none;" id="musique">
<table>
<select name="art musical" size="1" id="art musical">
<option value="0"></option>
<option value="1">musique classique</option>
<option value="2">musique pop_rock</option>
<option value="3">musique jazz_blues</option>
<option value="4">musique ambiance</option>
<option value="5">musique monde</option>
<option value="6">musique underground</option>
<option value="7">musique autre</option>
<option value="8">musique auteur_compositeur</option>
</select>
</table>
</div>

<div style="display:none;" id="visuel">
<table>
<select name="art visuel" size="1" id="art visuel">
<option value="0"></option>
<option value="1">visuel exposition</option>
<option value="2">visuel achat_location</option>
<option value="3">visuel performance</option>
</select>
</table>
</div>

<div style="display:none;" id="scene">
<table>
<select name="art de la scene" size="1" id="art de la scene">
<option value="0"></option>
<option value="scene amuseur public">scene amuseur public</option>
<option value="scene animation">scene animation</option>
<option value="scene humour">scene humour</option>
</select>
</table>
</div>
</form>
</tr>
</table>

</body>
</html>

merci de votre aide.. je suis un peu pris au dépourvue et je ne sais pas comment règler ce problème

**mathk** · 04/08/2005, 20h34

1. Post ton message dans le forum javascript
2. met des balise code
3. Met ton code javascritp dans une fonction et appèle là au lieu de mettre toutes tes instructions dans le onchange
4. Si t'arrive a affiche et a enlever c'est que tu affiche enlève pas les bonne chose alors essaye de recupèrer les bon élément aafficher/cacher

J'avou que ton code et pas trés attirant a lire donc j'ai pas pris la peinne de bien l'analyser

A+

**lacousinee** · 04/08/2005, 20h36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script>
function changer_liste(list) {
var index = list.selectedIndex;
var i;
var sublist;

for (i = 0; i < list.length; i++) {
sublist = document.getElementById(list.options[i].value);

sublist.style.display = (i==index)?'block':'none';
}
}
</script>
</head>
<body onload="document.form.liste.onchange();">
<form name="form">
<select name="liste" onchange="changer_liste(this);">
<option value="musique">art musical</option>
<option value="visuel">art visuel</option>
<option value="scene">art de la scene</option>
</select>

<select id="musique" name="art_musical">
<option value="0"></option>
<option value="1">musique classique</option>
<option value="2">musique pop_rock</option>
<option value="3">musique jazz_blues</option>
<option value="4">musique ambiance</option>
<option value="5">musique monde</option>
<option value="6">musique underground</option>
<option value="7">musique autre</option>
<option value="8">musique auteur_compositeur</option>
</select>

<select id="visuel" name="art_visuel">
<option value="0"></option>
<option value="1">visuel exposition</option>
<option value="2">visuel achat_location</option>
<option value="3">visuel performance</option>
</select>

<select id="scene" name="art_de_la_scene">
<option value="0"></option>
<option value="scene amuseur public">scene amuseur public</option>
<option value="scene animation">scene animation</option>
<option value="scene humour">scene humour</option>
</select>

</body>
</html>

**lacousinee** · 04/08/2005, 20h38

a non j'ai oublie il faut laisser par défaut un : style="display:none;" car sinon ca m'affichait les 3 listes déroulante

**mathk** · 04/08/2005, 20h51

Si tu a oublier de un truc dans ton post ta le boutton editer en haut a droit du post

et pense au balise code!

[HTML] liste déroulante dynamique

HTML

Discussions similaires

Partager

Partager