未捕获的类型错误：$(...).select2 不是函数答案

【问题标题】：Uncaught TypeError: $(...).select2 is not a function未捕获的类型错误：$(...).select2 不是函数
【发布时间】：2017-10-12 08:57:26
【问题描述】：

我下载了 select2 包并将两个文件 select2.min.css 和 select2.min.js 包含到我的 laravel 公共文件中，select2.min.css 到 public/css 文件夹中，并且 select2.min.js 到 public/js 中文件夹我想在我的页面上进行多项选择。这是我的“选择”：

 <select class="form-control js-example-basic-multiple" name="tags"         
     multiple="multiple"> 
    @foreach($tags as $tag)
       <option value='{{ $tag->id }}'>{{ $tag->name }}</option>
    @endforeach
 </select>*

这是我的<script> 部分：

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{ URL::to('js/select2.min.js') }}"></script></script>
<script>
        $(document).ready(function(){
            $(".js-example-basic-multiple").select2();
        });
</script>

我不知道多重选择不起作用，浏览器总是显示“Uncaught TypeError: $(...).select2 is not a function”

大家都遇到过这个问题吗？

【问题讨论】：

确保您只加载了一个版本的 jQuery。
我使用 CDN
@NickZhang Barmar 的意思是确保您没有在页面的其他任何地方加载另一个 jQuery 实例。这样做将替换第一个，从而删除所有已注册的插件
我找到了解决方案。我将整个

标签： jquery jquery-selectors

【解决方案1】：

最可能的原因是两次加载 jQuery。第二次加载 jQuery 时，它会删除已注册的插件。

解决办法是

脚本加载的顺序应该正确。那就是
```
1. jQuery,
2. select2,
3. your js files
```
jQuery 应该只加载一次。

【讨论】：

在我的例子中，它在 angular 2 project.config.ts 中被引用了两次
如何检查 jQuery 是否加载了两次？我正在使用 window.$ = window.jQuery = require('jquery'); window.Popper = require('popper.js').default; window.Bootstrap = require('bootstrap');

【解决方案2】：

在你无法控制标签的顺序，或者 jQuery 加载两次的情况下，例如你是一个内容编辑器：

// Concept: Render select2 fields after all javascript has finished loading
var initSelect2 = function(){

    // function that will initialize the select2 plugin, to be triggered later
    var renderSelect = function(){
        $('section#formSection select').each(function(){
            $(this).select2({
                'dropdownCssClass': 'dropdown-hover',
                'width': '',
                'minimumResultsForSearch': -1,
            });
        })
    };

    // create select2 HTML elements
    var style = document.createElement('link');
    var script = document.createElement('script');
    style.rel = 'stylesheet';
    style.href = 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css';    
    script.type = 'text/javascript';
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.full.min.js';

    // trigger the select2 initialization once the script tag has finished loading 
    script.onload = renderSelect;

    // render the style and script tags into the DOM
    document.getElementsByTagName('head')[0].appendChild(style);
    document.getElementsByTagName('head')[0].appendChild(script);
};

initSelect2();

【讨论】：