en utilisant des liens href dans la balise <option>

J'ai le code HTML suivant:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

Comment puis-je faire des valeurs Accueil , Contact et Plan du site sous forme de liens? J'ai utilisé le code suivant et comme je m'y attendais, cela n'a pas fonctionné:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

MISE À JOUR (novembre 2015): De nos jours, si vous voulez avoir un menu déroulant, il existe de nombreuses façons sans doute meilleures d'en implémenter un. Cette réponse est une réponse directe à une question directe, mais je ne préconise pas cette méthode pour les sites Web publics.

MISE À JOUR (mai 2020): Quelqu'un a demandé dans les commentaires pourquoi je ne préconiserais pas cette solution. Je suppose que c'est une question de sémantique. Je préfère que mes utilisateurs naviguent en utilisant <a>et conservent <select>pour faire des sélections de formulaire, car les éléments HTML ont une réunion sémantique et ils ont un but, anchorsvous emmener à la place, <select>sont de choisir des éléments dans des listes.

Considérez, si vous affichez une page avec un navigateur non traditionnel (un navigateur non graphique ou un lecteur d'écran ou la page est accessible par programme, ou JavaScript est désactivé) quelle est alors la «signification» ou l '«intention» de ceci que <select>vous avez utilisé pour la navigation? Il dit "veuillez choisir un nom de page" et pas grand-chose d'autre, certainement rien sur la navigation. La réponse facile à cela est well i know that my users will be using IE or whatever so shrugque cela manque un peu le point d'importance sémantique.

Alors qu'un élément d'interface utilisateur déroulant génial composé d'éléments de mise en page appropriés (et quelques js) contenant des ancres régulières conserve son intention même si l'élément de mise en page est perdu, "ce sont un tas de liens, sélectionnez-en un et nous y naviguerons" .

Voici un article sur l'utilisation abusive et abusive de<select> .

Vous ne pouvez pas utiliser de balises href avec des balises d'option. Vous aurez besoin de javascript pour ce faire.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

Utilisez plutôt un vrai menu déroulant: une liste ( ul, li) et des liens. Ne jamais abuser des éléments de formulaire comme liens.

Les lecteurs équipés de lecteurs d'écran parcourent généralement une liste de liens générée automatiquement - ils manqueront ces informations importantes. De nombreux systèmes de navigation au clavier (par exemple JAWS, Opera) offrent différents raccourcis clavier pour les liens et les éléments de formulaire.

Si vous ne pouvez toujours pas supprimer l'idée d'un, selectn'utilisez pas onchangeau moins le gestionnaire. C'est une vraie douleur pour les utilisateurs de clavier, cela rend votre troisième élément presque inaccessible.

La solution acceptée semble bonne, mais il y a un cas qu'elle ne peut pas gérer:

L'événement "onchange" ne sera pas déclenché lorsque la même option est resélectionnée. Donc, je suis venu avec l'amélioration suivante:

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

(Je n'ai pas assez de réputation pour commenter la réponse de toscho.)

Je n'ai aucune expérience avec les lecteurs d'écran et je suis sûr que vos points sont valides.

Cependant, en ce qui concerne l'utilisation d'un clavier pour manipuler les sélections, il est trivial de sélectionner n'importe quelle option en utilisant le clavier:

TAB au contrôle

ESPACE pour ouvrir la liste de sélection

Flèches HAUT ou BAS pour faire défiler jusqu'à l'élément de liste souhaité

ENTER pour sélectionner l'élément souhaité

L'événement onchange ou (JQuery .change ()) n'est déclenché que sur ENTRÉE.

Bien que personnellement je n'utilise pas de contrôle de formulaire pour des menus simples, il existe de nombreuses applications Web qui utilisent des contrôles de formulaire pour modifier la présentation de la page (par exemple, l'ordre de tri.) Ceux-ci peuvent être implémentés soit par AJAX pour charger un nouveau contenu dans le page, ou, dans les implémentations plus anciennes, en déclenchant de nouveaux chargements de page, qui est essentiellement un lien de page.

IMHO ce sont des utilisations valides d'un contrôle de formulaire.

La <select>balise crée une liste déroulante. Vous ne pouvez pas mettre de liens html dans une liste déroulante.

Cependant, il existe des bibliothèques JavaScript qui fournissent des fonctionnalités similaires. Voici un exemple: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Essayez ce code

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>