Comment masquer la barre de défilement dans un élément `` à sélection multiple tout en conservant les fonctionnalités avec jQuery ?

Comment masquer la barre de défilement verticale dans une fenêtre Element

Élimination de la barre de défilement verticale d'un

L’élément est une exigence courante dans la conception Web. Cette question explore comment obtenir cet effet tout en conservant la possibilité d'accéder aux options individuelles via jQuery.

Masquer la barre de défilement

La solution la plus simple consiste à utiliser la propriété de débordement CSS :

select {
    overflow-y: hidden;
}

Conserver la fonctionnalité des éléments

En se cachant la barre de défilement résout le problème visuel, elle empêche une interaction transparente avec l'élément. Pour résoudre ce problème, une alternative JavaScript peut être utilisée :

$(function() {
    $('select[multiple]').hide(); // Hide the select element

    var $container = $('<div>').addClass('select-container'); // Create a container div
    var $list = $('<ul>').addClass('select-list'); // Create a list element for options
    $('select[multiple] option').each(function() { // Loop through the options
        var $item = $('<li>').text($(this).text()); // Create a list item for each option
        $item.attr('data-id', $(this).val()); // Add the id as a data attribute
        $list.append($item); // Add the list item to the list
    });

    $container.append($list); // Add the list to the container
    $('select[multiple]').after($container); // Insert the container after the select element
});

Ce script crée une liste personnalisée avec des éléments de liste représentant chaque option, permettant une sélection et une gestion faciles à l'aide de jQuery. L'attribut data-id permet d'accéder à l'ID de l'option.

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!