Re Bonjour à tous,
je suis confronté à un nouveau problème:
Je souhaite mettre en place 2 menu déroulants
Le premier avec une liste de valeurs fixes (pas de soucis pour cette manipulation)
le second avec une liste d'options prise dans une base de données (la non plus pas de soucis)
Le problème viens du fait que je souhaite que le 2ème menu n'affiche que les informations qui répondent à l'option du premier menu
Par exemple:
Menu 1 options: Voiture, Scooter, Bateau, Avion
Le menu 2 n'affichera alors que les données relative à la sélection du menu 1 soit:
Menu 1 : Avion
Menu 2: Airbus, Falcon, Boeing, Embraer
Menu 1: Voiture
Menu 2: Audi, BMW, Renault Peugeot
Avez vous une idée de comment parvenir à ce résultat?
Merci d'avance
la communauté d'entraide francophone dédiée au PHP
Menu déroulant dynamique
les 2 manières de faire sont expliquées là :
http://www.developpez.net/forums/d598/w ... ees-entre/
http://www.developpez.net/forums/d598/w ... ees-entre/
En général, les solutions que j'ai trouvées grâce à gargle.com donnent des menus collès à gauche avec les sous-menus s'affichant à la doite des options.
Je n'ai pas trouvé de solution vec le menu horizontal et les sous menus en dessous des options
En gros, si tu te sers de PHP et un minimum de Javascript tu peus t'en tirer avec:
un truc dans ce genre
function cacher(id)
{
if ((id < 0) || (id > Nbelem))
{
}
else
{
if (id == 0)
{
for (i=1; i <=Nbelem; i++)
{
v =document.getElementById (i);
v.style.visibility= "hidden";
}
}
else
{
v =document.getElementById (id);
v.style.visibility= "hidden";
}
}
}
function basculer (id)
{
cacher(0);
v =document.getElementById (id);
v.style.visibility= "visible";
}
[/javascript]
Je n'ai pas trouvé de solution vec le menu horizontal et les sous menus en dessous des options
En gros, si tu te sers de PHP et un minimum de Javascript tu peus t'en tirer avec:
un truc dans ce genre
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name='statut' content='final' />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Menus>title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<?PHP
$menus = array ("voitures", "motos", "camions");
$menu0 = array ("Ford", "Jaguar", "Lotus");
$chaine ="
<body onload = 'cacher(0)'>
<div class= 'tableau'>
<div class ='ligne'><!-- ligne principal-->
<div class='cellule' onclick= 'basculer (1)'>
$menus[0];
</div>
<div class='cellule' onclick= 'basculer (2)'>
$menus[1]
</div>
<div class='cellule' onclick= 'basculer (3)'>
$menus[2]
</div>
</div> <!-- ligne principale-->
<div class ='ligne'> <!-- deuxième ligne contenant les sous-menus--
<div clas='ligne'>
<div class = 'cellule'> <!-- sousmenu1-->
<div class='tableau' id='1' style ='visibility:visible'>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[0]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[1]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[2]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>";
print "$chaine";
?>function cacher(id)
{
if ((id < 0) || (id > Nbelem))
{
}
else
{
if (id == 0)
{
for (i=1; i <=Nbelem; i++)
{
v =document.getElementById (i);
v.style.visibility= "hidden";
}
}
else
{
v =document.getElementById (id);
v.style.visibility= "hidden";
}
}
}
function basculer (id)
{
cacher(0);
v =document.getElementById (id);
v.style.visibility= "visible";
}
[/javascript]
*
{
font-family:Arial, "Sans-serif";
font-size:12pt;
background-color: antiquewhite;
}
a
{
font-size: 11pt;
}
*.cellule
{
display:table-cell;
padding-left:20px;
}
*.ligne
{
display:table-row;
}
*.decalee
{
padding-left:20px;
}
*.cachee
{
visibility:hidden;
}
*.tableau
{
display:table;
}
td
{
text-transform: none;
}
*.un
{
position: absolute;top:1%; left:1%; width:240px
}
Vanitas vanitatum et omnia vanitas
Mes derniers livres :
Sauvez les Mots chez BoD,
Tous les chemins mènent à ROM chez BoD
Mes derniers livres :
Sauvez les Mots chez BoD,
Tous les chemins mènent à ROM chez BoD