Opções de caixa de seleção pairáveis

A questão em questão envolve a criação de uma caixa de seleção onde as descrições das opções ficam visíveis quando o campo passa o mouse, em vez de clicar para abrir o opções.

Implementação

Para obter essa funcionalidade, utilizamos uma abordagem JavaScript da seguinte forma:

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

Nesta abordagem, a classe não selecionada é utilizada para ocultar inicialmente todas as opções, exceto a primeira. Quando o ul passa o mouse, os elementos não clicados recebem a classe não selecionada, desaparecendo efetivamente. O elemento selecionado permanece visível e seu valor correspondente é refletido no campo de seleção subjacente.