本文详解 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。
✅ 正确的资源加载顺序（关键！）
<meta charset="UTF-8"><title>Select2 多选基础示例</title><!-- 注意：CSS 可放在 head 中，但 JS 必须按顺序置于 body 底部 --><!-- 多选下拉框 --><select class="js-example-basic-multiple" name="states[]" 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>
⚠️ 常见错误与规避要点
- ❌ 错误顺序：将 select2.min.js 放在 jquery.min.js 之前 → 直接报错 Uncaught ReferenceError: $ is not defined。
- ❌ 过早初始化：在 DOM 元素未加载完成前调用 .select2() → 使用 $(document).ready() 或将脚本置于
