Comment afficher les options de la zone de sélection en survolant au lieu de cliquer ?

Survol pour afficher les options de la boîte de sélection

Le problème présenté implique la création d'une boîte de sélection qui affiche les options au survol plutôt qu'après avoir cliqué. Le code fourni est une simple boîte de sélection :

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

Solution

La solution jQuery fournie vise à obtenir le comportement souhaité :

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

Explication

• Le code masque initialement toutes les options sauf la première en ajoutant la classe "non sélectionnée".
• En survolant l'ul, il permet de cliquer sur les options pour modifier la sélection.
• Cliquer sur une option supprime la classe "non sélectionnée" de toutes les autres et l'ajoute à l'option cliquée, garantissant qu'elle reste visible.
• L'index de l'option sélectionnée est utilisé pour mettre à jour l'élément select, rendant la modification persistante.

Fonctionnalités supplémentaires

La solution a été étendue pour inclure :

• Une alerte pour démontrer la valeur de l'élément de sélection mis à jour.
• Style pour améliorer la visibilité des options sélectionnées et survolées.
• Une approche plug-in pour une mise en œuvre plus facile dans d'autres projets.
• Un élément de texte d'orientation pour expliquer le but de la zone de sélection.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!