B Bootstrap组件实验室
返回目录首页

Select2 select2 4.1.0

Select2 是经典的下拉选择库：搜索、标签化多选、远程数据加载与模板定制一应俱全。本页基于 Bootstrap 5.3.8 演示。

官方对照

Bootstrap 官方只提供原生 <select> 的外观样式；Select2 在其之上补齐搜索、标签、远程数据等能力。

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

对比维度Bootstrap 官方Select2
能力定位仅统一原生 <select> 表单外观完整下拉增强：搜索、多选、标签、远程数据
核心特性尺寸、禁用、校验态本地/远程搜索、tags 标签化、结果模板定制、分页加载
依赖与体积无额外依赖需 jQuery ≥ 1.7 + 本库 CSS/JS（约 60KB 未压缩）
样式定制表单类与 Sass 变量CSS 主题覆盖、templateResult/templateSelection 渲染函数
适用场景常规表单下拉大数据量下拉、标签输入框、远程接口选择

引入方式

通过 jsDelivr 固定版本引入。Select2 依赖 jQuery（官方要求 ≥ 1.7.0，本页固定 jQuery 3.7.1），无 Bootstrap 版本冲突，可直接与 Bootstrap 5.3 同页使用。

引入代码 
<!-- 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（Select2 依赖，要求 >= 1.7.0） -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

<!-- 3. Select2 样式与脚本 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

基础示例

给 <select> 调用 $(...).select2() 即可重绘；width: '100%' 让组件撑满容器，避免宽度塌陷。

HTML 示例 
<select class="js-basic" data-placeholder="请选择城市">
  <option></option>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option>杭州</option>
</select>

<script>
$(function () {
  $('.js-basic').select2({ width: '100%' });
});
</script>

标签化多选

开启 tags: true 后，用户既可以选择已有选项，也可以直接输入回车创建新标签；tokenSeparators 允许用逗号/空格快速分隔。

HTML 示例 
<select class="js-tags" multiple data-placeholder="选择或输入标签后回车">
  <option>工作</option>
  <option>生活</option>
  <option>学习</option>
</select>

<script>
$(function () {
  $('.js-tags').select2({
    width: '100%',
    tags: true,                 // 允许输入新选项
    tokenSeparators: [',', ' '] // 逗号、空格快速分隔标签
  });
});
</script>