Options de la zone de sélection planable

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

Mise en œuvre

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.