web-dev-qa-db-ger.com

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

Ich habe 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 als Links angeben? 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>
120
makmour
<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 wohl bessere Möglichkeiten, umzusetzen one. Diese Antwort ist eine direkte Antwort auf eine direkte Frage, aber ich befürworte diese Methode nicht für öffentlich zugängliche Websites.

243
gingerbreadboy

Sie können keine href-Tags in Options-Tags verwenden. Sie benötigen dazu 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>
17
Zaje

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

Leser mit Bildschirmleseprogrammen durchsuchen in der Regel 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 an.

Wenn Sie die Idee eines select immer noch nicht verwerfen können, verwenden Sie mindestens den onchange -Handler. Dies ist ein echtes Problem für Tastaturbenutzer, da Ihr dritter Artikel fast unzugänglich ist.

12
fuxia

Die akzeptierte Lösung sieht gut aus, aber es gibt einen Fall, den es 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);
});
7
Oscar Zhang

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

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

Wenn Sie jedoch eine Tastatur zum Manipulieren von Auswahlen verwenden, ist es trivial, eine Option mit der Tastatur auszuwählen:

TAB zur Steuerung

SPACE, um die Auswahlliste zu öffnen

Pfeiltasten NACH OBEN oder NACH UNTEN, um zum gewünschten Listenelement zu blättern

ENTER, um das gewünschte Element auszuwählen

Nur bei der EINGABETASTE 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 durch AJAX implementiert werden. Laden neuer Inhalte in die 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.

5
Rich Cloutier

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

Es gibt jedoch JavaScript-Bibliotheken, die ähnliche Funktionen bieten. Hier ist ein Beispiel: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3
danben
    <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>
2
azkhawaja