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

139

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>
Makmour
quelle
Sie können einfach dem folgenden Link folgen: stackoverflow.com/questions/12287672/… Ich hoffe, das kann helfen
Bikram Shrestha
Vielleicht würde diese Nicht-Javascript-Lösung helfen: stackoverflow.com/questions/9953482/…
Melsi

Antworten:

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>

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

Lebkuchenjunge
quelle
6
Ändern Sie einfach die Werte in home.php, contact.php und sitemap.php.
Jason Rowe
16
sehr cool! Sie können diesen Code auch verwenden <option value="#anchor_on_my_site">...</option>, um einen Link zu einem Anker zu erstellen !
Pruett
3
Ich weiß, dass dies sehr trivial ist, aber "onchange" und nicht "ONCHANGE" sein sollte
Oliver Dixon
3
Sie können es auflocation = this.value;
Juan Mendes
2
Nur um Sie wissen zu lassen, dass Ihr Link nicht funktioniert, um einen zu implementieren
John
18

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>
Zaje
quelle
14

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.

Fuxia
quelle
2
toscho ist natürlich richtig, makmours Anwendung ist ein massiver Missbrauch von Formularfeldern.
Lebkuchenjunge
Richtig, aber was ist mit mobilen Geräten? Wenn Ihre akzeptierte Antwort mit einem tatsächlichen Dropdown-Menü mit einem "display: hidden" -Schalter für die Medienabfrage gekoppelt ist, sind Ihre Bedenken weiterhin berechtigt? Oder haben Sie eine bessere Lösung?
Skippy le Grand Gourou
1
@SkippyleGrandGourou Die bessere Lösung besteht darin, nur ein Menü mit tatsächlichen Links zu verwenden.
Fuxia
7

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);
});
Oscar Zhang
quelle
3
Oder fügen Sie einfach eine leere Option am Anfang hinzu:<option value="">&nbsp;</option>
Kai Noack
5

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

Reicher Cloutier
quelle
3

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

danben
quelle
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>
Azkhawaja
quelle
Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern.
rgmt
-7

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>
Rakesh Chauhan
quelle