Select2 下拉菜单 - 滚动条不可用

Posted 2023-05-07

【中文标题】Select2 下拉菜单 - 滚动条不可用

【英文标题】：Select2 dropdown- scrollbar isn't available

【发布时间】：2020-11-19 23:58:36

【问题描述】：

我将 Select2 用于所有下拉输入，并为 10 个条目应用了 minimumResultsForSearch。

列表当然是可滚动的，但是，它似乎没有显示任何可能具有误导性的滚动条（箭头）（有些人可能认为这些项目只是被截断了）。

我在文档中找不到有关滚动条的任何信息。

有人知道如何添加一个吗？

【问题讨论】：

使用开发工具检查器查找元素名称并将css设置为显示滚动条。

我真的不知道有这样的 CSS 样式存在。谢谢！这么简单的解决方案

【参考方案1】：

在 select2 的基础上，滚动条没有问题。

问题将出现在您的 CSS 编码中。您需要提供代码以便能够搜索您的问题。

基本 Select2 示例（第一个：无搜索字段，第二个：搜索字段）

$('#first').select2(
  minimumResultsForSearch: 10
);
$('#second').select2(
  minimumResultsForSearch: 10
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

<div style="padding: 50px;">
  <div> 6 options available > No search bar (scroll works)</div>
  <select id="first" class="selectdata form-control custom-select" style="width: 60%">
    <option value="BE">Belgium</option>
    <option value="USA">USA</option>
    <option value="NL">Netherlands</option>
    <option value="UK">United Kingdom</option>
    <option value="GE">Germany</option>
    <option value="FR">France</option>
  </select>

  <div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
  <select id="second" class="selectdata form-control custom-select" style="width: 60%">
    <option value="BE">Belgium</option>
    <option value="USA">USA</option>
    <option value="NL">Netherlands</option>
    <option value="UK">United Kingdom</option>
    <option value="GE">Germany</option>
    <option value="FR">France</option>
    <option value="SP">Spain</option>
    <option value="IT">Italy</option>
    <option value="CH">China</option>
    <option value="RU">Rusia</option>
    <option value="LUX">Luxembourg</option>
  </select>
</div>