menggunakan tautan href di dalam tag <option>


148

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>

Anda cukup mengikuti helpfollowing link stackoverflow.com/questions/12287672/ .. Semoga bisa membantu
Bikram Shrestha

Mungkin solusi non javascript ini akan membantu: stackoverflow.com/questions/9953482/…
Melsi

Jawaban:


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


6
Ubah saja nilainya menjadi home.php, contact.php dan sitemap.php.
Jason Rowe

16
sangat keren! Anda dapat menggunakan kode ini dengan <option value="#anchor_on_my_site">...</option>untuk menautkan ke jangkar juga!
pruett

3
Saya tahu ini sangat sepele tetapi harus "onchange" dan bukan "ONCHANGE"
Oliver Dixon

3
Anda dapat mempersingkatnya menjadilocation = this.value;
Juan Mendes

2
hanya untuk memberi tahu Anda bahwa tautan Anda tidak berfungsi untuk cara menerapkannya
Yohanes

18

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>

14

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.


2
toscho benar tentu saja, aplikasi makmour adalah penyalahgunaan besar bidang formulir.
gingerbreadboy

Benar, tapi bagaimana dengan perangkat seluler? Jika jawaban yang diterima digabungkan dengan menu drop-down aktual dengan tombol "display: hidden" pada kueri media, apakah kekhawatiran Anda masih valid? Atau apakah Anda punya solusi yang lebih baik?
Skippy le Grand Gourou

1
@SkippyleGrandGourou Solusi yang lebih baik adalah menggunakan hanya satu menu dengan tautan aktual di dalamnya.
fuxia

8

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

3
Atau cukup tambahkan opsi kosong di awal:<option value="">&nbsp;</option>
Kai Noack

5

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



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>

Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa kode ini memecahkan masalah akan meningkatkan nilai jawaban jangka panjang.
rgmt

-7

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.