가져올 수 있는 선택 상자 옵션

당면한 질문은 클릭하여 여는 대신 필드 위로 마우스를 가져갈 때 옵션 설명이 표시되는 선택 상자를 만드는 것입니다. 옵션.

구현

이 기능을 구현하기 위해 우리는 JavaScript 접근 방식을 다음과 같이 활용했습니다. 다음:

$('#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 위에 마우스를 올리면 클릭하지 않은 요소에 선택되지 않은 클래스가 부여되어 사실상 사라집니다. 선택한 요소는 계속 표시되며 해당 값은 기본 선택 필드에 반영됩니다.