<option> etiketinin içindeki href bağlantılarını kullanma

Aşağıdaki HTML kodu var:

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

Ana Sayfa , İletişim ve Site Haritası değerlerini nasıl bağlantı olarak yapabilirim? Aşağıdaki kodu kullandım ve beklediğim gibi işe yaramadı:

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

GÜNCELLEME (Kasım 2015): Bu gün ve yaşta bir açılan menüye sahip olmak istiyorsanız, birini uygulamak için tartışmasız daha iyi yollar vardır. Bu cevap doğrudan bir soruya doğrudan bir cevap, ancak halka açık web siteleri için bu yöntemi savunmuyorum.

GÜNCELLEME (Mayıs 2020): Birisi yorumlarda neden bu çözümü savunamayacağımı sordu. Sanırım bu bir anlambilim meselesi. HTML öğelerinin semantik toplantısı olduğu ve bir amacı olduğu, sizi götürdüğü , listelerden bir şeyler seçtikleri için kullanıcılarımın gezinme <a>ve <select>form seçimleri yapmak için saklanmasını tercih ederim .anchors<select>

Eğer (non grafiksel tarayıcı veya ekran okuyucu veya sayfa programlı erişilen veya JavaScript devre dışı) sonra ne "anlamına gelen" veya bunun "niyet" olduğunu geleneksel olmayan bir tarayıcı ile bir sayfasını görüntülerken eğer düşünün <select>sahip navigasyon için kullanılır? "Lütfen bir sayfa adı seçin" diyor ve başka bir şey değil, kesinlikle gezinmeyle ilgili hiçbir şey yok. Buna kolay cevap şudur, well i know that my users will be using IE or whatever so shrugama bu anlamsal önem noktasını kaçırmaktadır.

Bazı düzenli ankrajlar içeren uygun düzen elemanlarından (ve bazı js) oluşan korkak bir açılır arayüz öğesi, düzen öğesi kaybolsa bile yine de niyetini korurken, "bunlar bir grup bağlantıdır, birini seçin ve oraya gideceğiz" .

İşte kötüye kullanımı ve kötüye kullanımı hakkında<select> bir makale .

Seçenek etiketleri ile href etiketlerini kullanamazsınız. Bunu yapmak için javascript'e ihtiyacınız olacak.

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

Bunun yerine gerçek bir açılır menü kullanın: bir liste ( ul, li) ve bağlantılar. Form öğelerini asla bağlantı olarak kötüye kullanmayın.

Ekran okuyuculu okuyucular genellikle otomatik olarak oluşturulan bir bağlantı listesini tarar; bu önemli bilgileri kaçırırlar. Birçok klavye navigasyon sistemi (örn. JAWS, Opera) bağlantılar ve form öğeleri için farklı klavye kısayolları sunar.

Hala bir fikrini bırakamıyorsanız en azından işleyiciyi selectkullanmayın onchange. Bu klavye kullanıcıları için gerçek bir acıdır, üçüncü öğenize neredeyse erişilemez hale getirir.

Kabul edilen çözüm iyi görünüyor, ancak işleyemediği bir durum var:

Aynı seçenek yeniden seçildiğinde "onchange" olayı tetiklenmez. Bu yüzden aşağıdaki gelişmeyi buldum:

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

(Toscho'nun cevabı hakkında yorum yapmak için yeterli itibarım yok.)

Ekran okuyucularla ilgili hiçbir deneyimim yok ve eminim puanlarınız geçerli.

Bununla birlikte, seçimleri değiştirmek için bir klavye kullanmak kadarıyla, klavyeyi kullanarak herhangi bir seçenek seçmek önemsizdir:

SEKMEDE KONTROL

Seçim listesini açmak için SPACE

İstediğiniz liste öğesine gitmek için YUKARI veya AŞAĞI oklar

İstenen öğeyi seçmek için ENTER

Yalnızca ENTER'da onchange veya (JQuery .change ()) olayı tetiklenir.

Kişisel olarak basit menüler için bir form denetimi kullanmasam da, sayfanın sunumunu değiştirmek için form denetimlerini kullanan birçok web uygulaması vardır (örneğin, sıralama düzeni). Bunlar AJAX tarafından yeni içerik yüklemek için uygulanabilir veya daha eski uygulamalarda, aslında bir sayfa bağlantısı olan yeni sayfa yüklemelerini tetikleyerek.

IMHO bunlar bir form denetiminin geçerli kullanımlarıdır.

<select>Etiketi, bir açılır listesini oluşturur. Html bağlantılarını açılır listeye koyamazsınız.

Ancak, benzer işlevler sağlayan JavaScript kitaplıkları vardır. İşte bir örnek: 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>

Bu Kodu Deneyin

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