Le principe est d'écrire les listes liées dans le code HTML, de les cacher en CSS, puis de les faire afficher en JAVASCRIPT suivant le choix du visiteur.
A/ Avantages :
1/ Très facile à mettre en place, code facile à comprendre.
2/ Les listes liées étant toutes dans le code HTML, leur contenu est naturellement référencé par les moteurs de recherche.
B/ Inconvénients :
1/ Les listes liées étant toutes dans le code HTML, elles ne doivent pas être très longues et/ou très nombreuses sans craindre un ralentissement du chargement de la page. Pour de plus gros besoins voir ce tuto.
2/ Fonctionnement dépendant de javascript. Ce dispositif devrait être doublé par un fonctionnement entièrement en php pour ne pas être dépendant de javascript (tout comme devrait l'être un fonctionnement avec ajax...).
C/ Fonctionnement :
Le choix de catégorie se fait ici par des boutons radio. Une solution alternative avec un select est mise en commentaire dans le code html.
Syntaxe à respecter pour un bon fonctionnement du code javascript :
1/ La classe des boutons radios, ou la classe du premier select, doit correspondre à l'id du bloc contenant la liste des sélections liées.
2/ Les valeurs des boutons radio, ou les valeurs des options du premier select, doivent correspondre aux id des listes des sélections liées.
Le code javascript est documenté au fil de l'eau.
(Vous n'avez pas besoin de modifier le code javascript, ni les paramètres pour l'appel à la fonction javascript "Affiche_liste(this.className,this.value)", si vous respectez la syntaxe ci-dessus)
Un exemple complet :
Syntaxe: [ Télécharger ] [ Masquer ]
Code php
<?php
if (isset($_POST["envoyer"]))
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listes liées HTML JAVASCRIPT</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
// Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
var id_ensemble_select = document.getElementById(id_ensemble_select);
// Sélection de la sélection liée
var id_select = document.getElementById(id_select);
if(id_ensemble_select)
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();
// Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau
tab = id_ensemble_select.getElementsByTagName('select');
var tablength = tab.length;
// Liste les éléments du tableau
for (i=0; i < tablength; i++)
{
// Met les selects en disable = true et les cache avec style.display = 'none'
tab[i].disabled = true;
if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien
}
// Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'
if(id_select)
{
id_select.disabled = false;
id_select.style.display = 'inline';
}
}
}
-->
</script>
<style type="text/css">
#categorie
{
height:2em;
}
#categorie select
{
display:none;
}
</style>
</head>
<body>
<div style="width:40em;margin:auto; border:1px solid black;padding:1em">
<form action = "#" method = "post">
<p>
<label for="choix_cadets">cadets</label>
<input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<label for="choix_juniors">juniors</label>
<input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<label for="choix_seniors">seniors</label>
<input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<!--
<select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />
<option value = "">«Choisissez»</option>
<option value = "cadets">cadets</option>
<option value = "juniors">juniors</option>
<option value = "seniors">seniors</option>
</select>
-->
</p>
<p style="font-style:italic">La liste déroulante ci-dessous s'affichera en fonction du choix ci-dessus :</p>
<p id = "categorie"> <!-- style= "display:inline" disabled="disabled" pour la première liste pour réserver un affichage de la liste non active dès le chargement de la page -->
<select name = "selection" id = "cadets" style= "display:inline" disabled="disabled">
<option value = "">«Choisissez»</option>
<option value = "cadet1">Cadet 1</option>
<option value = "cadet2">Cadet 2</option>
</select>
<select name = "selection" id = "juniors">
<option value = "">«Choisissez»</option>
<option value = "junior1">Junior 1</option>
<option value = "junior2">Junior 2</option>
</select>
<select name = "selection" id = "seniors">
<option value = "">«Choisissez»</option>
<option value = "senior1">Senior 1</option>
<option value = "senior2">Senior 2</option>
<option value = "senior3">Senior 3</option>
</select>
</p>
<p style="font-style:italic">Exemple autre champ texte</p>
<p>
<input type="text" name="autre_champ"/>
<br />
<br />
<input name = "envoyer" value = "Envoyer" type = "submit"/>
</p>
</form>
</div>
</body>
</html>
if (isset($_POST["envoyer"]))
{
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Listes liées HTML JAVASCRIPT</title>
<script type="text/javascript">
<!--
function Affiche_liste(id_ensemble_select,id_select)
{
// Sélection du bloc contenant les sélections liées (id = "categorie" dans notre exemple)
var id_ensemble_select = document.getElementById(id_ensemble_select);
// Sélection de la sélection liée
var id_select = document.getElementById(id_select);
if(id_ensemble_select)
{
//Initialisation d'une variable pour contenir un tableau.
var tab = new Array();
// Cherche les balises select inlues dans le bloc (id = "categorie" dans notre exemple) contenant les sélections liées et les retourne dans un tableau
tab = id_ensemble_select.getElementsByTagName('select');
var tablength = tab.length;
// Liste les éléments du tableau
for (i=0; i < tablength; i++)
{
// Met les selects en disable = true et les cache avec style.display = 'none'
tab[i].disabled = true;
if(id_select) tab[i].style.display = 'none';// si select est vide on ne fait rien
}
// Met la sélection liée sélectionné en disable = false et l'affiche avec style.display = 'inline'
if(id_select)
{
id_select.disabled = false;
id_select.style.display = 'inline';
}
}
}
-->
</script>
<style type="text/css">
#categorie
{
height:2em;
}
#categorie select
{
display:none;
}
</style>
</head>
<body>
<div style="width:40em;margin:auto; border:1px solid black;padding:1em">
<form action = "#" method = "post">
<p>
<label for="choix_cadets">cadets</label>
<input type="radio" id = "choix_cadets" name = "cat" value = "cadets" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<label for="choix_juniors">juniors</label>
<input type="radio" id = "choix_juniors" name = "cat" value = "juniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<label for="choix_seniors">seniors</label>
<input type="radio" id = "choix_seniors" name = "cat" value = "seniors" class = "categorie" onclick = "Affiche_liste(this.className,this.value)" />
<!--
<select name = "cat" class = "categorie" onchange = "Affiche_liste(this.className,this.value)" />
<option value = "">«Choisissez»</option>
<option value = "cadets">cadets</option>
<option value = "juniors">juniors</option>
<option value = "seniors">seniors</option>
</select>
-->
</p>
<p style="font-style:italic">La liste déroulante ci-dessous s'affichera en fonction du choix ci-dessus :</p>
<p id = "categorie"> <!-- style= "display:inline" disabled="disabled" pour la première liste pour réserver un affichage de la liste non active dès le chargement de la page -->
<select name = "selection" id = "cadets" style= "display:inline" disabled="disabled">
<option value = "">«Choisissez»</option>
<option value = "cadet1">Cadet 1</option>
<option value = "cadet2">Cadet 2</option>
</select>
<select name = "selection" id = "juniors">
<option value = "">«Choisissez»</option>
<option value = "junior1">Junior 1</option>
<option value = "junior2">Junior 2</option>
</select>
<select name = "selection" id = "seniors">
<option value = "">«Choisissez»</option>
<option value = "senior1">Senior 1</option>
<option value = "senior2">Senior 2</option>
<option value = "senior3">Senior 3</option>
</select>
</p>
<p style="font-style:italic">Exemple autre champ texte</p>
<p>
<input type="text" name="autre_champ"/>
<br />
<br />
<input name = "envoyer" value = "Envoyer" type = "submit"/>
</p>
</form>
</div>
</body>
</html>
News
Plan de site
SitemapIndex
Flux RSS