Wie erstelle ich schwebende Auswahlfeldoptionen mit JavaScript?

Hoverable Select Box-Optionen

Die vorliegende Frage besteht darin, 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 wie folgt verwendet:

$('#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 alles auszublenden Optionen außer der ersten. 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.

Das obige ist der detaillierte Inhalt vonWie erstelle ich schwebende Auswahlfeldoptionen mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!