| JavaScript - Créer une liste déroulante |
 |
|
 |
|
|
Une liste déroulante à la portée de tous. Difficile de faire plus simple :
L'astuce, ici, est d'utiliser l'attribut VALUE de l'élément OPTION pour accueillir l'adresse du lien. Dès qu'on clique sur une des options de la liste, la fonction Lien() consulte cette valeur et l'envoie au navigateur pour qu'il charge la page.
 Le formulaire :
Le code HTML du formulaire doit être placé dans le corps du document (quelque part entre les balises <BODY> et </BODY>). Ce formulaire ne contient qu'un seul élément (SELECT). La validation du formulaire est automatiquement générée par le choix d'une option, grâce à l'événement onChange.
<FORM NAME="Choix">
<SELECT NAME="Liste" onChange="Lien()">
<OPTION VALUE="">Choisir une option
<OPTION VALUE="../../copains.html">Les copains
<OPTION VALUE="../../plongee/index.html">La plongée
<OPTION VALUE="http://www.google.com">Recherche
</SELECT>
</FORM>
La fonction JavaScript :
La fonction Lien() doit être placée dans l'entête de la page (quelque part entre les balises <HEAD> et </HEAD>).
function Lien() {
i = document.Choix.Liste.selectedIndex;
if (i == 0) return;
url = document.Choix.Liste.options[i].value;
parent.location.href = url;
}
On peut faire encore plus simple mais ça ne passerait pas sur tous les navigateurs.
A voir également : Listes déroulantes liées.
Ancienne version :
Voici maintenant l'ancienne version de cette page. Le procédé décrit ci-dessous est plus complexe mais a l'avantage d'être paramétrable. C'est à dire que les adresses des pages sont générées par du code JavaScript, alors que dans l'exemple précédent elles sont "en dur" dans le code HTML. Ceci sera donc bien utile à ceux qui veulent construire des usines à gaz :)
Dans l'en-tête de la page :
<SCRIPT>
<!--
function CreeTableau() {
this.length = CreeTableau.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = CreeTableau.arguments[i]
}
var LibelleOption = new CreeTableau("Choisissez un sujet",
"La plongée sous-marine",
"L'énergie nucléaire",
"Le bonheur",
"Débuter sur le web",
"The Dead Kennedys",
"Quelques liens sympa");
var CibleURL = new CreeTableau("",
"plongee.html",
"nucleaire.html",
"bonheur.html",
"web.html",
"dk.htm",
"liens.htm");
function AllerA(form) {
i = form.SelectMenu.selectedIndex;
if (i == 0) return;
parent.location.href = CibleURL[i+1];
}
// -->
</SCRIPT>
Dans le corps de la page :
<SCRIPT>
document.write("<FORM>");
document.write("<SELECT NAME='SelectMenu' onChange='AllerA(this.form)'>");
Nombre = LibelleOption.length;
for (var i = 1; i <= Nombre; i++)
document.write("<OPTION>" +LibelleOption[i]);
document.write('</SELECT>');
document.write('</FORM>');
// -->
</SCRIPT>
Un exemple plus sophistiqué se trouve sur la page Listes déroulantes liées.
|