होवरेबल सेलेक्ट बॉक्स विकल्प

वर्तमान प्रश्न में एक सेलेक्ट बॉक्स बनाना शामिल है, जहां फ़ील्ड को खोलने के लिए क्लिक करने के बजाय, फ़ील्ड पर होवर करने पर विकल्प विवरण दिखाई देते हैं। विकल्प।

कार्यान्वयन

इस कार्यक्षमता को प्राप्त करने के लिए, हमने एक जावास्क्रिप्ट दृष्टिकोण का उपयोग किया इस प्रकार है:

$('#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).
    });

इस दृष्टिकोण में, अचयनित वर्ग का उपयोग प्रारंभ में पहले वाले को छोड़कर सभी विकल्पों को छिपाने के लिए किया जाता है। जब ul पर होवर किया जाता है, तो गैर-क्लिक किए गए तत्वों को अचयनित वर्ग दिया जाता है, जो प्रभावी रूप से गायब हो जाता है। चयनित तत्व दृश्यमान रहता है और उसका संबंधित मान अंतर्निहित चयन फ़ील्ड में परिलक्षित होता है।