Bootstrap Selectpicker 未显示完整选项
Posted
技术标签:
【中文标题】Bootstrap Selectpicker 未显示完整选项【英文标题】：Bootstrap Selectpicker not showing complete options 【发布时间】：2021-07-15 08:28:37 【问题描述】：我在 bootstrap selectpicker 中有一个包含近 2700 个项目的可搜索列表，但是当我向下滚动选项时，列表中仅显示 50 或 60 个选项，其余为空 Pleae check this image。 当我搜索时，它会搜索所有 2700 种产品（这意味着搜索还可以），但选项并未完全列在下拉列表中。
我使用$('.selectpicker').selectpicker( maxOptions:2 ) maxOptions 但仍然没有运气。
希望我能够描述我的问题。
【问题讨论】：
【参考方案1】：你能检查一下下面的代码吗？希望它对你有用。使用maxOptions 当您设置多选时，在此演示中我们使用了maxOptions: 2，这意味着它最多选择2 个选项。
请参考此链接：https://jsfiddle.net/yudizsolutions/br1hyof8/
$('.selectpicker').selectpicker(
style: 'btn-info',
size: 4,
maxOptions: 2
);.bootstrap-select.btn-group .dropdown-menu.inner,
.dropdown-menu.open
min-height: 100vh !important;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap selectpicker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
</head>
<body>
<select data-live-search="true" class="selectpicker" multiple>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 128GB - SPACE GREY HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SILVER HK</option>
<option>APPLE IPAD PRO 12.9" 2020 256GB - SPACE GREY HK</option>
</select>
</body>
</html>【讨论】：
我不想选择 2 个最大选项我想选择选择器来列出下拉列表中的所有元素，目前它在下拉列表中仅显示 50 到 60，其余为空，所以我想在我给定的图像中显示下拉列表中的所有选项，您可以看到下拉列表为空。 我们明白你的意思。请参考这个更新的代码链接：jsfiddle.net/yudizsolutions/Luwztnjs/2以上是关于Bootstrap Selectpicker 未显示完整选项的主要内容，如果未能解决你的问题，请参考以下文章
如何防止 Bootstrap 4 Selectpicker 打开
php bootstrap selectpicker控件 下拉有几千条，太卡了，如何解决
如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值
bootstrap中selectpicker下拉框使用方法实例