如何为DataTables自动生成的下拉菜单添加滚动条？

问题描述 #

需要为从DataTables表格自动获取选项的3个下拉菜单（dropdown1、dropdown2、dropdown3）添加滚动条，每个菜单约30个选项，要求显示8个选项后出现滚动条。

解决方案 #

通过CSS控制下拉菜单的最大高度，配合JavaScript给生成的下拉框添加样式类即可实现需求，具体步骤如下：

1. 添加CSS样式 #

在HTML的<head>标签中插入以下样式，设置下拉菜单的最大高度（适配8个选项的显示）并开启垂直滚动：

.scrollable-select {
  max-height: 180px; /* 可根据选项行高微调，确保刚好显示8个选项 */
  overflow-y: auto;
}

/* 可选：优化滚动条视觉样式 */
.scrollable-select::-webkit-scrollbar {
  width: 8px;
}
.scrollable-select::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scrollable-select::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.scrollable-select::-webkit-scrollbar-thumb:hover {
  background: #555;
}

2. 修改JavaScript代码 #

在生成<select>元素时，添加自定义样式类scrollable-select，修改buildSelect函数中的select创建代码：

var select = $('<select class="scrollable-select"><option value=""></option></select>')
  .appendTo($('#dropdown' + counter).empty())
  .on('change', function() {
    var val = $.fn.dataTable.util.escapeRegex(
      $(this).val()
    );

    column
      .search(val ? '^' + val + '$' : '', true, false)
      .draw();
  });

完整修改后的代码示例 #

HTML部分（含样式）

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
    <style>
      .scrollable-select {
        max-height: 180px;
        overflow-y: auto;
      }
      .scrollable-select::-webkit-scrollbar {
        width: 8px;
      }
      .scrollable-select::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      .scrollable-select::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }
      .scrollable-select::-webkit-scrollbar-thumb:hover {
        background: #555;
      }
    </style>
  </head>
  <body>
    <div class="searchbox">
      <p>Name: <span id="dropdown1"></span></p>
      <p>Position: <span id="dropdown2"></span></p>
      <p>Office: <span id="dropdown3"></span></p>
      <button type="button" id="test">Clear Filters</button>
    </div>
    <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style="width: 100%; padding-top: 10px;">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th colspan="3" style="text-align: center;">Information</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ID.AI</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett -2</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>
        <tr>
          <td>Ashton.1 -2</td>
          <td>Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$4,800</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

JavaScript部分

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });

  buildSelect(table);
  table.on('draw', function() {
    buildSelect(table);
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select class="scrollable-select"><option value=""></option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');
    });

    var currSearch = column.search();
    if (currSearch) {
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

说明 #

• max-height的值可根据实际选项的行高调整，确保刚好显示8个选项；
• 额外的滚动条样式用于优化视觉体验，可根据需求选择是否保留；
• 该方法兼容大部分现代浏览器，原生下拉框会自动适配设置的高度并显示滚动条。

内容的提问来源于stack exchange，提问作者newuser