Bootstrap Select bootstrap-select 1.14.0-beta3

bootstrap-select 把原生下拉框重绘为功能完整的选择器：支持搜索、多选、选项分组与按钮样式定制。本页基于 Bootstrap 5.3.8 演示。

官方对照

Bootstrap 官方的 Form Select 只统一了原生 <select> 的外观，不提供搜索与多选增强；bootstrap-select 在此之上补齐了这些能力。

官方已有官方已有基础下拉样式，本库是其增强版

对比维度	Bootstrap 官方	bootstrap-select
能力定位	仅对原生 <select> 做表单控件外观统一	把 select 重绘为带搜索、多选、分组的高级下拉组件
核心特性	尺寸、禁用、校验态等基础表单样式	data-live-search 搜索、multiple 多选、optgroup 分组、自定义标题与勾选标记
依赖与体积	无额外依赖（Bootstrap bundle 已含）	需 jQuery ≥ 1.9.1 + 本库 CSS/JS（约 40KB 未压缩）
样式定制	表单类与 Sass 变量定制	data-size、data-width、data-style 等属性 + CSS 主题覆盖
适用场景	常规后台表单、选项较少的下拉	选项数量多、需要搜索或多选的复杂表单

引入方式

通过 jsDelivr 固定版本引入。注意版本兼容：bootstrap-select 最新稳定版 1.13.18 仅适配 Bootstrap 3/4；Bootstrap 5 需使用官方 1.14.0-beta（已加入 BS5 支持，尚未发布正式版）。本页固定 1.14.0-beta3，并依赖 jQuery 3.7.1（要求 ≥ 1.9.1）。

引入代码

<!-- 1. Bootstrap 5.3 CSS（页面已引入，此处示意） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 2. jQuery（bootstrap-select 依赖，要求 >= 1.9.1） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 3. bootstrap-select 样式与脚本（Bootstrap 5 请用 1.14.0-beta） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

基础示例

给原生 <select> 加上 selectpicker 类，再调用 $(...).selectpicker() 即可完成重绘；title 作为占位提示。

HTML 示例

<select class="selectpicker" title="请选择城市">
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option>杭州</option>
</select>

<script>
$(function () {
  // 初始化：把所有 .selectpicker 重绘为增强下拉
  $('.selectpicker').selectpicker();
});
</script>

搜索与多选

加 data-live-search="true" 开启选项搜索，加 multiple 允许多选；optgroup 分组在下拉中自动保留。

HTML 示例

<select class="selectpicker" multiple data-live-search="true"
        title="可搜索、可多选的技术栈">
  <optgroup label="前端">
    <option>HTML / CSS</option>
    <option>JavaScript</option>
    <option>TypeScript</option>
    <option>Vue</option>
    <option>React</option>
  </optgroup>
  <optgroup label="后端">
    <option>Node.js</option>
    <option>Python</option>
    <option>Java</option>
    <option>Go</option>
  </optgroup>
</select>

<script>
// data-live-search / multiple 均由属性驱动，初始化调用同基础示例
$(function () {
  $('.selectpicker').selectpicker();
});
</script>