menggunakan tautan href di dalam tag <option>

Saya memiliki kode HTML berikut:

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

Bagaimana cara menjadikan nilai Beranda , Kontak , dan Peta Situs sebagai tautan? Saya menggunakan kode berikut dan seperti yang saya harapkan tidak berhasil:

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

UPDATE (Nov 2015): Di zaman sekarang ini, jika Anda ingin memiliki menu drop-down, ada banyak cara yang bisa dibilang lebih baik untuk menerapkannya. Jawaban ini adalah jawaban langsung untuk pertanyaan langsung, tetapi saya tidak menganjurkan metode ini untuk situs web yang berhubungan dengan publik.

PEMBARUAN (Mei 2020): Seseorang bertanya di komentar mengapa saya tidak akan menganjurkan solusi ini. Saya kira ini adalah pertanyaan tentang semantik. Saya lebih suka pengguna saya menavigasi menggunakan <a>dan terus <select>membuat pilihan formulir karena elemen HTML memiliki pertemuan semantik dan mereka memiliki tujuan, anchorsmembawa Anda ke tempat, <select>adalah untuk memilih sesuatu dari daftar.

Pertimbangkan, jika Anda melihat halaman dengan browser non-tradisional (browser non-grafis atau pembaca layar atau halaman diakses secara terprogram, atau JavaScript dinonaktifkan) apa yang dimaksud dengan "arti" atau "maksud" dari ini yang <select>Anda miliki digunakan untuk navigasi? Itu mengatakan "tolong pilih nama halaman" dan tidak banyak lagi, tentu saja tidak ada tentang navigasi. Tanggapan yang mudah untuk ini adalah well i know that my users will be using IE or whatever so shrugtetapi ini agak meleset dari pentingnya semantik.

Sedangkan elemen UI tarik-turun yang funky yang terbuat dari elemen tata letak yang sesuai (dan beberapa js) yang berisi beberapa jangkar biasa masih mempertahankan maksudnya meskipun elemen tata letak hilang, "ini adalah sekumpulan tautan, pilih satu dan kami akan menuju ke sana" .

Berikut adalah artikel tentang penyalahgunaan dan penyalahgunaan<select> .

Anda tidak dapat menggunakan tag href di dalam tag opsi. Anda membutuhkan javascript untuk melakukannya.

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

Gunakan menu tarik-turun yang sebenarnya: daftar ( ul, li) dan tautan. Jangan pernah menyalahgunakan elemen bentuk sebagai tautan.

Pembaca dengan pembaca layar biasanya memindai melalui daftar tautan yang dibuat secara otomatis - mereka akan kehilangan informasi penting ini. Banyak sistem navigasi keyboard (misalnya JAWS, Opera) menawarkan pintasan keyboard yang berbeda untuk tautan dan elemen formulir.

Jika Anda masih tidak bisa membatalkan ide selectjangan gunakan onchangehandler setidaknya. Ini sangat menyebalkan bagi pengguna keyboard, hal ini membuat item ketiga Anda hampir tidak dapat diakses.

Solusi yang diterima terlihat bagus, tetapi ada satu kasus yang tidak dapat ditangani:

Peristiwa "onchange" tidak akan dipicu saat opsi yang sama dipilih kembali. Jadi, saya datang dengan peningkatan berikut:

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

(Saya tidak memiliki reputasi yang cukup untuk mengomentari jawaban toscho.)

Saya tidak memiliki pengalaman dengan pembaca layar dan saya yakin poin Anda valid.

Namun sejauh menggunakan keyboard untuk memanipulasi pemilihan, sangatlah mudah untuk memilih opsi apapun dengan menggunakan keyboard:

TAB ke kontrol

SPASI untuk membuka daftar pilih

Panah atas atau bawah untuk menggulir ke item daftar yang diinginkan

ENTER untuk memilih item yang diinginkan

Hanya di ENTER apakah peristiwa onchange atau (JQuery .change ()) akan aktif.

Meskipun saya pribadi tidak akan menggunakan kontrol formulir untuk menu sederhana, ada banyak aplikasi web yang menggunakan kontrol formulir untuk mengubah penyajian halaman (misalnya, urutan pengurutan.) Ini dapat diterapkan baik oleh AJAX untuk memuat konten baru ke dalam halaman, atau, dalam implementasi lama, dengan memicu pemuatan halaman baru, yang pada dasarnya adalah link halaman.

IMHO ini adalah penggunaan valid dari kontrol formulir.

The <select>tag menciptakan daftar dropdown. Anda tidak dapat meletakkan link html di dalam dropdown.

Namun, ada pustaka JavaScript yang menyediakan fungsi serupa. Berikut salah satu contohnya: 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>

Coba Kode ini

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