Comment créer des options de zone de sélection planables avec JavaScript ?

Options de la boîte de sélection survolable

La question en question implique la création d'une boîte de sélection où les descriptions des options sont visibles lorsque le champ est survolé, plutôt que de cliquer pour ouvrir le options.

Implémentation

Pour obtenir cette fonctionnalité, nous avons utilisé une approche JavaScript comme suit :

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

Dans cette approche, la classe non sélectionnée est utilisée pour masquer initialement toutes les options sauf la première. Lorsque l'ul est survolé, les éléments non cliqués reçoivent la classe non sélectionnée, disparaissant effectivement. L'élément sélectionné reste visible et sa valeur correspondante est reflétée dans le champ de sélection sous-jacent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!