Liste déroulante avec liens, valid xhtml.

Bonjour à tous,

Je suis en train de developper un site en xhtml/css et je cherche comment rendre valide une liste déroulante avec des liens directe, sans passer par l'événement onChange. Bien sur cette liste n'est pas la navigation principal mais juste pour ouvrir des articles de presses, photos, etc...

Voici le bout de code en xhtml:

<select name="photos" >
 <option value="page.html" selected="selected">*Navigation *</option>
 <option value="page0.html">1</option>
 <option value="page1.html">2</option>
 <option value="page2.html">3</option>
 <option value="page3.html">3</option>
</select>

Actuellement les liens ne fonctionnent pas.
Quelqu'un connais t'il un moyen simple et valid pour ouvrir une page? ou une image?

Je vous remercie de vos réponses car je n'est pas trouvé de solutions qui me conviennent.

Merci.
Modifié par kapsiko (05 Feb 2007 - 16:09)

bonjour,

Je ne suis pas sûr de ce que tu veux faire...? Tu ne veux pas voir de onchange="..." sur tes options dans ton coding XHTML, c'est bien ça ??

Si, oui,

A. tu dois externaliser ton code javascript dans un fichier .js externe.
B. Puis, tu devras créer une fonction d'initialisation (function "init") qui associe une fonction particulière (function "redirection") à chaque évènement onchange de chaque option de ta liste. Cette initialisation doit être faite une seule fois sur le onload de ta page (

window.onload = init;

).
C. Ensuite, tu dois coder ta function "redirection" : cette fonction doit 1. récupérer la valeur de l'option qui est sélectionnée. Cette valeur (i.e. attribut value) contient une URL. 2. Tu dois alors affecter cette URL à

location.href

.

Ca doit être tout.
Modifié par naudjf (05 Feb 2007 - 18:13)

Ah non, pas onchange sur les listes déroulantes, surtout pas ! Pensez à ceux qui naviguent au clavier et qui n'ont pas le temps de faire flèche bas que déjà une page inconnue se charge...

La meilleure solution reste le formulaire complet avec le bouton :

<form action="redirect.php" method="get" onsubmit="var x = this.elements['destination']; document.location=x.options[x.selectedIndex].value; ">
<p><select name="destination">
<option .....> ... </option>
<option .... > .... </option>
</select>
<button type="submit">OK</button<
</p></form>