Question

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

shuffleCards(array) {
  // logic here
}

handleClickEvent(event) {
  cards = this.shuffleCards(cards);
}

render() {
  return (
    <button onClick={this.handleClickEvent.bind(this)}>Click me</button>
  );
}

这是我的<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>

我不知道多重选择不起作用，浏览器总是显示“Uncaught TypeError：$（...）。select2不是函数”

以前每个人都遇到过这个问题吗？

Answer 1

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

解决方案

脚本加载应按更正顺序排列。那是
```
1. jQuery,
2. select2,
3. your js files
```
jQuery只能加载一次。

Answer 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();

未捕获的TypeError：$（...）。select2不是函数

2 个答案: