używając linków href wewnątrz tagu <option>

Mam następujący kod HTML:

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

Jak ustawić wartości Strona główna , Kontakt i Mapa witryny jako łącza? Użyłem następującego kodu i zgodnie z oczekiwaniami nie zadziałał:

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

AKTUALIZACJA (listopad 2015): W dzisiejszych czasach, jeśli chcesz mieć menu rozwijane, istnieje wiele prawdopodobnie lepszych sposobów na jego wdrożenie. Ta odpowiedź jest bezpośrednią odpowiedzią na bezpośrednie pytanie, ale nie zalecam tej metody w przypadku publicznych witryn internetowych.

AKTUALIZACJA (maj 2020): Ktoś zapytał w komentarzach, dlaczego nie polecałbym tego rozwiązania. Myślę, że to kwestia semantyki. Wolałbym, aby moi użytkownicy nawigowali za pomocą <a>i pozostawali <select>do wybierania formularzy, ponieważ elementy HTML mają spotkania semantyczne i mają cel, anchorszabierają cię w miejsca, <select>służą do wybierania rzeczy z list.

Zastanów się, czy przeglądasz stronę w nietradycyjnej przeglądarce (przeglądarka niegraficzna lub czytnik ekranu, strona jest dostępna programowo lub JavaScript jest wyłączony), jakie <select>masz „znaczenie” lub „zamiar” tego używany do nawigacji? Mówi „proszę wybrać nazwę strony” i niewiele więcej, a na pewno nic o nawigacji. Prosta odpowiedź na to jest taka, well i know that my users will be using IE or whatever so shrugże taki rodzaj pomija znaczenie semantyczne.

Podczas gdy funky rozwijany element interfejsu użytkownika utworzony z odpowiednich elementów układu (i niektórych js) zawierający pewne zwykłe kotwice nadal zachowuje swoją intencję, nawet jeśli element układu zostanie utracony, „to jest kilka linków, wybierz jeden i będziemy tam nawigować” .

Oto artykuł na temat nadużyć i nadużyć<select> .

Nie możesz używać tagów href z tagami opcji. Aby to zrobić, będziesz potrzebować 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>

Zamiast tego użyj prawdziwego menu rozwijanego: listy ( ul, li) i linków. Nigdy nie nadużywaj elementów formularza jako linków.

Czytelnicy korzystający z czytników ekranu zwykle przeglądają wygenerowaną automagicznie listę linków - przegapią te ważne informacje. Wiele systemów nawigacji z klawiaturą (np. JAWS, Opera) oferuje różne skróty klawiaturowe dla łączy i elementów formularzy.

Jeśli nadal nie możesz porzucić pomysłu select, nie używaj onchangeprzynajmniej programu obsługi. Jest to prawdziwy ból dla użytkowników klawiatury, ponieważ trzeci element jest prawie niedostępny.

Przyjęte rozwiązanie wygląda dobrze, ale jest jeden przypadek, z którym nie może sobie poradzić:

Zdarzenie „onchange” nie zostanie wyzwolone po ponownym wybraniu tej samej opcji. Tak więc wymyśliłem następujące ulepszenie:

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

(Nie mam wystarczającej reputacji, aby skomentować odpowiedź toscho).

Nie mam doświadczenia z czytnikami ekranu i jestem pewien, że Twoje punkty są ważne.

Jednak jeśli chodzi o używanie klawiatury do manipulowania zaznaczeniami, wybranie dowolnej opcji za pomocą klawiatury jest trywialne:

TAB do kontrolki

SPACJA, aby otworzyć listę wyboru

Strzałki W GÓRĘ lub W DÓŁ służą do przewijania do żądanej pozycji listy

ENTER, aby wybrać żądaną pozycję

Dopiero po naciśnięciu klawisza ENTER zostanie uruchomione zdarzenie onchange lub (JQuery .change ()).

Chociaż osobiście nie użyłbym kontrolki formularza do prostych menu, istnieje wiele aplikacji internetowych, które używają kontrolek formularzy do zmiany prezentacji strony (np. Porządek sortowania). Mogą one zostać zaimplementowane przez AJAX, aby załadować nową zawartość do strony lub, w starszych implementacjach, przez wyzwalanie wczytywania nowej strony, co jest zasadniczo linkiem do strony.

IMHO to są prawidłowe zastosowania kontrolki formularza.

<select>Tag tworzy listę rozwijaną. Nie możesz umieszczać linków HTML w menu rozwijanym.

Istnieją jednak biblioteki JavaScript, które zapewniają podobną funkcjonalność. Oto jeden przykład: 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>

Wypróbuj ten kod

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