Opciones del cuadro de selección que se puede desplazar

La pregunta que nos ocupa implica crear un cuadro de selección donde las descripciones de las opciones son visibles cuando se pasa el cursor sobre el campo, en lugar de hacer clic para abrir el opciones.

Implementación

Para lograr esta funcionalidad, utilizamos un enfoque de JavaScript de la siguiente manera:

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

En este enfoque, la clase no seleccionada se utiliza para ocultar inicialmente todas las opciones excepto la primera. Cuando se pasa el cursor sobre ul, los elementos en los que no se hace clic reciben la clase no seleccionada, desapareciendo efectivamente. El elemento seleccionado permanece visible y su valor correspondiente se refleja en el campo de selección subyacente.