en utilisant des liens href dans la balise <option>


139

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>

Vous pouvez simplement suivre le lien d'aide suivant stackoverflow.com/questions/12287672/... J'espère que cela pourra vous aider
Bikram Shrestha

Peut-être que cette solution non javascript aiderait: stackoverflow.com/questions/9953482/…
Melsi

Réponses:


267
<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> .


6
Changez simplement les valeurs en home.php, contact.php et sitemap.php.
Jason Rowe

16
très cool! vous pouvez également utiliser ce code avec <option value="#anchor_on_my_site">...</option>pour créer un lien vers une ancre!
pruett

3
Je sais que c'est très trivial mais devrait être "onchange" et non "ONCHANGE"
Oliver Dixon

3
Vous pouvez le raccourcir àlocation = this.value;
Juan Mendes

2
juste pour vous faire savoir que votre lien ne fonctionne pas pour les moyens d'en implémenter un
John

18

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>

14

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.


2
toscho est correct bien sûr, l'application de makmour est une utilisation abusive massive des champs de formulaire.
gingerbreadboy

Oui, mais qu'en est-il des appareils mobiles? Si la réponse acceptée est associée à un menu déroulant réel avec un interrupteur «affichage: caché» sur la requête média, vos préoccupations sont-elles toujours valables? Ou avez-vous une meilleure solution?
Skippy le Grand Gourou

1
@SkippyleGrandGourou La meilleure solution est d'utiliser un seul menu avec des liens réels.
fuxia

7

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);
});

3
Ou ajoutez simplement une option vide au début:<option value="">&nbsp;</option>
Kai Noack

5

(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.



2
    <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>

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire sur la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse.
rgmt

-7

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.