Bagaimana untuk Memaparkan Pilihan Kotak Pilihan pada Tuding Daripada Mengklik?

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!