如何为select框选项列表添加垂直滚动条并仅显示前几项？

这个问题确实挺棘手——原生<select>的下拉菜单样式受浏览器原生控件限制，直接修改高度和滚动条的方案兼容性很差，尤其是结合Bootstrap的form-control类时，常规方法可能失效。下面给你两种可行的实现思路，推荐第二种更可靠的方案：

方法1：原生Select的CSS Hack（兼容性有限） #

部分现代浏览器支持通过特定伪元素修改下拉菜单的样式，但注意仅在Chrome、Edge等WebKit/Blink内核浏览器生效，Firefox和IE可能不兼容：

/* 针对WebKit内核浏览器的下拉菜单设置滚动条样式 */
select.form-control::-webkit-scrollbar {
  width: 8px;
}
select.form-control::-webkit-scrollbar-track {
  background: #f1f1f1;
}
select.form-control::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
select.form-control::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 尝试设置下拉菜单的最大高度（部分浏览器支持） */
select.form-control {
  max-height: 150px;
  overflow-y: auto;
}

不过这个方案局限性很大，如果你需要兼容多浏览器，建议直接用下面的方法2。

方法2：用Bootstrap Dropdown组件模拟Select（推荐） #

既然原生Select不好控制，我们可以用Bootstrap自带的Dropdown组件来模拟一个自定义Select，这样能完全控制下拉菜单的高度和滚动条，而且风格和Bootstrap保持一致：

完整代码示例 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.wrapper{ 
  width:200px; 
  padding:20px; 
  height: 150px; 
}
/* 自定义下拉菜单的高度和滚动条 */
.custom-dropdown-menu {
  max-height: 120px; /* 控制显示的条目数量，按需调整 */
  overflow-y: auto;
}
/* 模拟原生Select的按钮样式 */
.custom-select-btn {
  text-align: left;
  width: 100%;
}
</style>

<div class="wrapper">
  <!-- 模拟的Select组件 -->
  <div class="dropdown">
    <button class="btn btn-default form-control custom-select-btn dropdown-toggle" type="button" id="customSelect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      One <!-- 默认选中值 -->
      <span class="caret pull-right" style="margin-top:8px;"></span>
    </button>
    <ul class="dropdown-menu custom-dropdown-menu" aria-labelledby="customSelect">
      <!-- 下拉选项列表 -->
      <li><a href="#" data-value="">One</a></li>
      <li><a href="#" data-value="">Two</a></li>
      <li><a href="#" data-value="">Three</a></li>
      <li><a href="#" data-value="">Four</a></li>
      <li><a href="#" data-value="">Five</a></li>
      <li><a href="#" data-value="">Six</a></li>
      <li><a href="#" data-value="">Seven</a></li>
      <li><a href="#" data-value="">Eight</a></li>
      <li><a href="#" data-value="">Nine</a></li>
    </ul>
    <!-- 隐藏input，用于表单提交时传递选中值 -->
    <input type="hidden" name="customSelectValue" id="customSelectValue" value="">
  </div>
</div>

<script>
// 处理下拉选项点击事件
$('.custom-dropdown-menu li a').click(function(e) {
  e.preventDefault();
  const selectedText = $(this).text();
  const selectedValue = $(this).data('value');
  
  // 更新按钮显示文本
  $('#customSelect').text(selectedText);
  // 重新添加下拉箭头（text()会覆盖原有内容）
  $('#customSelect').append('<span class="caret pull-right" style="margin-top:8px;"></span>');
  // 更新隐藏input的值，保证表单提交时能传递数据
  $('#customSelectValue').val(selectedValue);
  
  // 关闭下拉菜单
  $('#customSelect').dropdown('toggle');
});
</script>

方案说明 #

1. 样式可控：通过.custom-dropdown-menu类设置max-height和overflow-y: auto，直接实现下拉菜单的滚动效果，完全不受浏览器限制。
2. 表单兼容性：添加隐藏的<input>元素存储选中值，确保表单提交时能正常传递数据，和原生Select功能一致。
3. 交互体验：通过JS模拟原生Select的选中逻辑，点击选项后自动更新按钮文本并关闭下拉菜单，体验和原生Select几乎一致。

这个方案兼容性好，能完美适配Bootstrap 3的样式，而且完全可控，应该能解决你的问题。

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