本文详解 select2 多选功能的正确初始化流程，重点解决因依赖顺序错误导致的“$ is not defined”或 select2() 未定义报错问题，并提供可直接运行的完整 html 示例与样式建议。
本文详解 select2 多选功能的正确初始化流程，重点解决因依赖顺序错误导致的“$ is not defined”或 select2() 未定义报错问题，并提供可直接运行的完整 html 示例与样式建议。
Select2 是一个基于 jQuery 的强大下拉增强库，其多选模式（Multi-select Pillbox）以标签式选中效果、搜索过滤和响应式布局广受青睐。但初学者常因脚本加载顺序不当而失败——核心原则是：jQuery 必须在 Select2 之前加载。否则浏览器会因 $ 或 jQuery 未定义而抛出 TypeError: $(...).select2 is not a function。
✅ 正确的资源加载顺序（关键！）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Select2 多选基础示例</title>
<!-- 注意：CSS 可放在 head 中，但 JS 必须按顺序置于 body 底部 -->
</head>
<body>
<!-- 多选下拉框 -->
<select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 300px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="WY">Wyoming</option>
</select>
<!-- ✅ 严格按此顺序：jQuery → Select2 CSS → Select2 JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<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>
<!-- 初始化脚本（推荐放于 body 底部或 DOMContentLoaded 后执行） -->
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
placeholder: "请选择省份...",
allowClear: true, // 显示清空按钮
closeOnSelect: false // 多选时保持下拉打开（可选）
});
});
</script>
</body>
</html>⚠️ 常见错误与规避要点
- ❌ 错误顺序：将 select2.min.js 放在 jquery.min.js 之前 → 直接报错 Uncaught ReferenceError: $ is not defined。
- ❌ 过早初始化：在 DOM 元素未加载完成前调用 .select2() → 使用 $(document).ready() 或将脚本置于 </body> 前确保 DOM 就绪。
- ❌ 缺少 multiple 属性：HTML <select> 标签必须显式声明 multiple="multiple"，否则仅渲染为单选。
- ❌ 忽略宽度设置：Select2 默认不继承父容器宽度，建议通过 style="width: 300px;" 或 CSS 类（如 .js-example-basic-multiple { width: 100%; }）显式指定。
? 进阶提示
- 若需国际化支持（如中文提示），引入对应语言包：
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/i18n/zh-CN.js"></script>
并在初始化时添加 language: 'zh-CN' 配置项。
- 动态添加选项后，如需刷新 Select2 视图，调用 $('.js-example-basic-multiple').trigger('change');。
遵循以上结构与规范，即可零障碍启用 Select2 的 Pillbox 多选功能——简洁、稳定、开箱即用。
