خيارات مربع التحديد القابلة للتمرير

يتضمن السؤال المطروح إنشاء مربع تحديد حيث تكون أوصاف الخيارات مرئية عند تمرير الماوس فوق الحقل، بدلاً من النقر لفتحه الخيارات.

التنفيذ

لتحقيق هذه الوظيفة، استخدمنا نهج جافا سكريبت كما يتبع:

$('#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، يتم إعطاء العناصر التي لم يتم النقر عليها فئة غير محددة، وتختفي فعليًا. يظل العنصر المحدد مرئيًا وتنعكس قيمته المقابلة في حقل التحديد الأساسي.