Hoverable Select Box Options

Bei der vorliegenden Frage geht es darum, ein Auswahlfeld zu erstellen, in dem die Optionsbeschreibungen sichtbar sind, wenn man mit der Maus über das Feld fährt, anstatt darauf zu klicken, um es zu öffnen Optionen.

Implementierung

Um diese Funktionalität zu erreichen, haben wir einen JavaScript-Ansatz verwendet folgt:

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

Bei diesem Ansatz wird die nicht ausgewählte Klasse verwendet, um zunächst alle Optionen außer der ersten auszublenden. Wenn Sie mit der Maus darüber fahren, erhalten die nicht angeklickten Elemente die nicht ausgewählte Klasse und verschwinden praktisch. Das ausgewählte Element bleibt sichtbar und sein entsprechender Wert wird im zugrunde liegenden Auswahlfeld widergespiegelt.