複数選択
スクロールバーを非表示にする
最も簡単な解決策は、CSS オーバーフロー プロパティを利用することです。
select { overflow-y: hidden; }
保持要素機能
スクロールバーを非表示にすると視覚的な問題は解決しますが、要素とのシームレスな操作が妨げられます。これに対処するには、JavaScript の代替手段を使用できます。
$(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 });
このスクリプトは、各オプションを表すリスト項目を含むカスタム リストを作成し、jQuery を使用した簡単な選択と処理を可能にします。 data-id 属性は、オプションの ID へのアクセスを提供します。
以上がjQuery の機能を維持しながら、複数選択の ` 要素のスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。