Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?

Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?

Linda Hamilton
Linda Hamiltonasal
2024-11-01 06:08:02859semak imbas

How to Display Select Box Options on Hover Instead of Clicking?

Melayang untuk Memaparkan Pilihan Kotak Pilihan

Isu yang dibentangkan melibatkan mencipta kotak pilih yang memaparkan pilihan pada tuding dan bukannya selepas mengklik. Kod yang disediakan ialah kotak pilihan mudah:

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select> 

Penyelesaian

Penyelesaian jQuery yang disediakan bertujuan untuk mencapai tingkah laku yang diingini:

$('#selectUl li:not(":first")').addClass('unselected');
$('#selectUl').hover(
    function(){
    $(this).find('li').click(
        function(){
            $('.unselected').removeClass('unselected');
            $(this).siblings('li').addClass('unselected');
            var index = $(this).index();
            $('select option:selected').removeAttr('selected');
            $('select[name=size]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        });
    },
    function(){
});

Penjelasan

  • Kod pada mulanya menyembunyikan semua pilihan kecuali yang pertama dengan menambah kelas "tidak dipilih".
  • Setelah menuding di atas ul, ia membolehkan klik pada pilihan untuk menukar pilihan.
  • Mengklik pilihan mengalih keluar kelas "tidak dipilih" daripada semua yang lain dan menambahkannya pada pilihan yang diklik, memastikan ia kekal kelihatan.
  • Indeks pilihan yang dipilih ialah digunakan untuk mengemas kini elemen pilihan, menjadikan perubahan berterusan.

Ciri Tambahan

Penyelesaian telah diperluaskan untuk merangkumi:

  • Amaran untuk menunjukkan nilai elemen pilihan yang dikemas kini.
  • Penggayaan untuk meningkatkan keterlihatan pilihan yang dipilih dan dilegar.
  • Pendekatan pemalam untuk pelaksanaan yang lebih mudah dalam projek lain.
  • Elemen teks panduan untuk menerangkan tujuan kotak pilihan.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn