时间戳

首页 > 解决方案 > Bootstrap Selectpicker 未显示完整选项

html - Bootstrap Selectpicker 未显示完整选项

问题描述

我在 bootstrap selectpicker 中有一个包含近 2700 个项目的可搜索列表，但是当我向下滚动选项时，它仅显示列表中的 50 或 60 个选项，其余为空请检查此图像。当我搜索时，它会搜索所有 2700 种产品（这意味着搜索还可以），但选项并未完全列在下拉列表中。

我使用$('.selectpicker').selectpicker({ maxOptions:2 })maxOptions 但仍然没有运气。

希望我能够描述我的问题。

标签： htmljquerycssbootstrap-4bootstrap-selectpicker

解决方案

你能检查下面的代码吗？希望它对你有用。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>

推荐阅读