Wie verstecke ich die Bildlaufleiste in einem Mehrfachauswahlelement unter Beibehaltung der Funktionalität mit jQuery?

So verbergen Sie die vertikale Bildlaufleiste in einem Element

Entfernen der vertikalen Bildlaufleiste aus einer Mehrfachauswahl

Element ist eine häufige Anforderung im Webdesign. In dieser Frage wird untersucht, wie dieser Effekt erzielt werden kann und gleichzeitig die Möglichkeit erhalten bleibt, über jQuery auf einzelne Optionen zuzugreifen.

Ausblenden der Bildlaufleiste

Die einfachste Lösung ist die Verwendung der CSS-Überlaufeigenschaft:

select {
    overflow-y: hidden;
}

Beibehaltung der Elementfunktionalität

Beim Ausblenden der Die Bildlaufleiste löst das visuelle Problem, sie behindert die nahtlose Interaktion mit dem Element. Um dieses Problem zu lösen, kann eine JavaScript-Alternative eingesetzt werden:

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

Dieses Skript erstellt eine benutzerdefinierte Liste mit Listenelementen, die jede Option darstellen, was eine einfache Auswahl und Handhabung mit jQuery ermöglicht. Das data-id-Attribut bietet Zugriff auf die ID der Option.

Das obige ist der detaillierte Inhalt vonWie verstecke ich die Bildlaufleiste in einem Mehrfachauswahlelement unter Beibehaltung der Funktionalität mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!