Verwenden von href-Links innerhalb des <option> -Tags

Ich habe den folgenden HTML-Code:

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

Wie kann ich Home- , Kontakt- und Sitemap- Werte als Links festlegen? Ich habe den folgenden Code verwendet und wie erwartet hat es nicht funktioniert:

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

UPDATE (Nov 2015): Wenn Sie heutzutage ein Drop-Menü haben möchten, gibt es viele wahrscheinlich bessere Möglichkeiten, eines zu implementieren. Diese Antwort ist eine direkte Antwort auf eine direkte Frage, aber ich befürworte diese Methode nicht für öffentlich zugängliche Websites.

UPDATE (Mai 2020): Jemand fragte in den Kommentaren, warum ich diese Lösung nicht befürworten würde. Ich denke, es ist eine Frage der Semantik. Ich möchte lieber, dass meine Benutzer mit Formularen navigieren <a>und diese behalten, <select>um sie auszuwählen, da HTML-Elemente eine semantische Besprechung haben und einen Zweck haben anchors, Sie an einen Platz zu bringen und <select>Dinge aus Listen auszuwählen.

Wenn Sie eine Seite mit einem nicht herkömmlichen Browser anzeigen (auf einen nicht grafischen Browser oder Bildschirmleser oder auf die Seite wird programmgesteuert zugegriffen oder JavaScript ist deaktiviert), was ist dann die "Bedeutung" oder die "Absicht" dieser Seite <select>? für die Navigation verwendet? Es heißt "Bitte wählen Sie einen Seitennamen" und nicht viel anderes, sicherlich nichts über das Navigieren. Die einfache Antwort darauf ist well i know that my users will be using IE or whatever so shrug, dass dies den Punkt von semantischer Bedeutung verfehlt.

Während ein funky Dropdown-UI-Element aus geeigneten Layoutelementen (und einigen js), das einige reguläre Anker enthält, seine Absicht auch dann beibehält, wenn das Layoutelement verloren geht, "sind dies eine Reihe von Links, wählen Sie eines aus und wir werden dorthin navigieren". .

Hier ist ein Artikel über den Missbrauch von<select> .

Sie können keine href-Tags mit Options-Tags verwenden. Dazu benötigen Sie Javascript.

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

Verwenden Sie stattdessen ein echtes Dropdown-Menü: eine Liste ( ul, li) und Links. Verwenden Sie niemals Formularelemente als Links.

Leser mit Bildschirmlesern durchsuchen normalerweise eine automatisch generierte Liste von Links - diese wichtigen Informationen werden ihnen fehlen. Viele Tastaturnavigationssysteme (z. B. JAWS, Opera) bieten unterschiedliche Tastaturkürzel für Links und Formularelemente.

Wenn Sie die Idee eines immer noch nicht fallen selectlassen können, verwenden Sie den onchangeHandler zumindest nicht. Dies ist ein echtes Problem für Tastaturbenutzer. Es macht Ihr drittes Element fast unzugänglich.

Die akzeptierte Lösung sieht gut aus, aber es gibt einen Fall, den sie nicht behandeln kann:

Das Ereignis "onchange" wird nicht ausgelöst, wenn dieselbe Option erneut ausgewählt wird. Also habe ich mir folgende Verbesserung ausgedacht:

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

(Ich habe nicht genug Ruf, um die Antwort von toscho zu kommentieren.)

Ich habe keine Erfahrung mit Screenreadern und bin mir sicher, dass Ihre Punkte gültig sind.

Bei der Verwendung einer Tastatur zum Bearbeiten von Auswahlen ist es jedoch trivial, eine Option mithilfe der Tastatur auszuwählen:

TAB zur Steuerung

LEERTASTE, um die Auswahlliste zu öffnen

Aufwärts- oder Abwärtspfeile, um zum gewünschten Listenelement zu blättern

ENTER, um das gewünschte Element auszuwählen

Nur bei ENTER wird das Ereignis onchange oder (JQuery .change ()) ausgelöst.

Während ich persönlich kein Formularsteuerelement für einfache Menüs verwenden würde, gibt es viele Webanwendungen, die Formularsteuerelemente verwenden, um die Darstellung der Seite zu ändern (z. B. Sortierreihenfolge). Diese können entweder von AJAX implementiert werden, um neuen Inhalt in das Menü zu laden Seite oder in älteren Implementierungen durch Auslösen neuer Seitenladevorgänge, bei denen es sich im Wesentlichen um einen Seitenlink handelt.

IMHO sind dies gültige Verwendungen eines Formularsteuerelements.

Das <select>Tag erstellt eine Dropdown-Liste. Sie können keine HTML-Links in ein Dropdown-Menü einfügen.

Es gibt jedoch JavaScript-Bibliotheken, die ähnliche Funktionen bieten. Hier ist ein Beispiel: 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>

Versuchen Sie diesen 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>