如何将Select2初始化代码封装为函数？控制台报未捕获类型错误

AI 小北

2026-8-12

解决Select2初始化时"不是函数"的错误及正确封装方式

错误核心根源

出现"未捕获类型错误：select2不是函数"，绝大多数是以下原因导致：

未引入Select2的依赖文件，或引入顺序错误：必须先加载jQuery，再加载Select2的JS文件，最后加载Select2的CSS文件。
Select2文件路径错误，浏览器无法成功加载资源。
页面重复引入jQuery，导致Select2绑定到旧jQuery实例，后续代码使用了新的jQuery实例。

正确的封装写法

先确保依赖加载无误，再根据场景封装初始化逻辑：

方式1：基础DOM就绪初始化（适合静态页面）

$(document).ready(function() {
    // 封装成可复用函数
    function initSelect2() {
        $('.select2').select2({
            width: "100%",
            placeholder: "Select Here"
        });
    }

    // 调用初始化
    initSelect2();
});

方式2：支持动态元素的封装（适合异步加载DOM的场景）

如果页面存在动态生成的.select2元素，需要兼容重复初始化的情况：

$(document).ready(function() {
    function initSelect2(selector = '.select2') {
        // 先销毁已初始化的实例，避免重复绑定报错
        $(selector).select2('destroy').select2({
            width: "100%",
            placeholder: "Select Here"
        });
    }

    // 页面加载时初始化静态元素
    initSelect2();

    // 异步加载数据后，可针对动态元素重新初始化
    // 示例：initSelect2('.dynamic-select2');
});