Wie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?

Bewegen Sie den Mauszeiger, um Auswahlfeldoptionen anzuzeigen

Das vorgestellte Problem besteht darin, ein Auswahlfeld zu erstellen, das Optionen beim Bewegen des Mauszeigers statt nach dem Klicken anzeigt. Der bereitgestellte Code ist ein einfaches Auswahlfeld:

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select> 

Lösung

Die bereitgestellte jQuery-Lösung zielt darauf ab, das gewünschte Verhalten zu erreichen:

$('#selectUl li:not(":first")').addClass('unselected');
$('#selectUl').hover(
    function(){
    $(this).find('li').click(
        function(){
            $('.unselected').removeClass('unselected');
            $(this).siblings('li').addClass('unselected');
            var index = $(this).index();
            $('select option:selected').removeAttr('selected');
            $('select[name=size]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        });
    },
    function(){
});

Erklärung

• Der Code verbirgt zunächst alle Optionen außer der ersten, indem er die Klasse „nicht ausgewählt“ hinzufügt.
• Wenn Sie mit der Maus über die UL fahren, wird das Klicken aktiviert auf die Optionen, um die Auswahl zu ändern.
• Durch Klicken auf eine Option wird die „nicht ausgewählte“ Klasse von allen anderen entfernt und zur angeklickten Option hinzugefügt, sodass sie sichtbar bleibt.
• Der Index der ausgewählten Option ist Wird verwendet, um das ausgewählte Element zu aktualisieren und die Änderung dauerhaft zu machen.

Zusätzliche Funktionen

Die Lösung wurde um Folgendes erweitert:

• Eine Warnung, die den Wert des aktualisierten Auswahlelements anzeigt.
• Stil zur Verbesserung der Sichtbarkeit der ausgewählten und schwebenden Optionen.
• Ein Plug-in-Ansatz zur einfacheren Implementierung in anderen Projekten.
• Ein Leittextelement zur Erläuterung des Zwecks des Auswahlfelds.

Das obige ist der detaillierte Inhalt vonWie werden Auswahlfeldoptionen beim Hover angezeigt, anstatt darauf zu klicken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!