Bagaimana untuk Menyembunyikan Bar Tatal dalam Elemen `` Berbilang Pilih Semasa Mengekalkan Fungsi dengan jQuery?

Cara Menyembunyikan Bar Skrol Menegak dalam Elemen

Menghapuskan bar skrol menegak daripada berbilang pilihan elemen adalah keperluan biasa dalam reka bentuk web. Soalan ini meneroka cara untuk mencapai kesan ini sambil mengekalkan keupayaan untuk mengakses pilihan individu melalui jQuery.

Menyembunyikan Bar Tatal

Penyelesaian paling mudah ialah menggunakan sifat limpahan CSS:

select {
    overflow-y: hidden;
}

Elemen Penahan Kefungsian

Semasa menyembunyikan bar skrol menyelesaikan isu visual, ia menghalang interaksi lancar dengan elemen. Untuk menangani perkara ini, alternatif JavaScript boleh digunakan:

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

Skrip ini mencipta senarai tersuai dengan item senarai yang mewakili setiap pilihan, membolehkan pemilihan dan pengendalian mudah menggunakan jQuery. Atribut data-id menyediakan akses kepada ID pilihan.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Bar Tatal dalam Elemen `` Berbilang Pilih Semasa Mengekalkan Fungsi dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!