Bagaimana untuk Mencipta Pilihan Kotak Pilihan Hoverable dengan JavaScript?

Pilihan Kotak Pilih Boleh Dilegar

Soalan yang ada melibatkan mencipta kotak pilihan di mana penerangan pilihan boleh dilihat apabila medan dilegar di atas, dan bukannya mengklik untuk membuka pilihan.

Pelaksanaan

Untuk mencapai fungsi ini, kami menggunakan pendekatan JavaScript seperti berikut:

$('#selectUl li:not(":first")').addClass('unselected');
// Hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

Dalam pendekatan ini, kelas yang tidak dipilih digunakan untuk menyembunyikan semua pada mulanya pilihan kecuali yang pertama. Apabila ul dituding di atas, elemen yang tidak diklik diberikan kelas yang tidak dipilih, dengan berkesan hilang. Elemen yang dipilih kekal kelihatan dan nilai yang sepadan ditunjukkan dalam medan pilihan asas.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pilihan Kotak Pilihan Hoverable dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!