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

139

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>
makmour
źródło
Możesz po prostu skorzystać z pomocy, korzystając z poniższego linku stackoverflow.com/questions/12287672/ ... Mam nadzieję, że to pomoże
Bikram Shrestha,
Może to rozwiązanie nie javascript by pomogło: stackoverflow.com/questions/9953482/ ...
Melsi

Odpowiedzi:

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>

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

gingerbreadboy
źródło
6
Po prostu zmień wartości na home.php, contact.php i sitemap.php.
Jason Rowe
16
bardzo fajny! możesz użyć tego kodu w <option value="#anchor_on_my_site">...</option>celu utworzenia linku do kotwicy!
pruett
3
Wiem, że to bardzo trywialne, ale powinno to być „onchange”, a nie „ONCHANGE”
Oliver Dixon
3
Możesz to skrócić dolocation = this.value;
Juan Mendes
2
tylko po to, żebyś wiedział, że twój link nie działa, aby go wdrożyć
John
18

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>
Zaje
źródło
14

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.

fuxia
źródło
2
toscho ma oczywiście rację, zastosowanie makmour to masowe nadużycie pól formularza.
gingerbreadboy
Zgadza się, ale co z urządzeniami mobilnymi? Jeśli zaakceptowana odpowiedź jest połączona z aktualnym menu rozwijanym z włączoną opcją „wyświetl: ukryte” przy zapytaniu o media, czy Twoje obawy są nadal aktualne? A może masz lepsze rozwiązanie?
Skippy le Grand Gourou
1
@SkippyleGrandGourou Lepszym rozwiązaniem jest użycie tylko jednego menu z aktualnymi linkami.
fuxia
7

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);
});
Oscar Zhang
źródło
3
Lub po prostu dodaj pustą opcję na początku:<option value="">&nbsp;</option>
Kai Noack
5

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

Rich Cloutier
źródło
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
źródło
Chociaż ten kod może odpowiedzieć na pytanie, dostarczenie dodatkowego kontekstu dotyczącego tego, jak i / lub dlaczego rozwiązuje problem, poprawiłoby długoterminową wartość odpowiedzi.
rgmt
-7

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>
Rakesh Chauhan
źródło