Uncaught TypeError：$（...）。select2は関数ではありません

Question

私はselect2パッケージをダウンロードし、select2.min.cssとselect2.min.jsの2つのファイルを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> 

が動作し、ブラウザされていない、常に「キャッチされない例外TypeErrorを示しています。$（ ...）。select2は関数ではありません "

誰もがこの問題に直面しましたか？

Answer 1

ほとんどの理由は、jQueryを2回ロードすることが考えられます。 2回目にjQueryをロードすると、登録されたプラグインが削除されます。

ソリューションは

1. スクリプトのロードが修正順序であるべきです。つまり、

   1. jQuery, 
   2. select2, 
   3. your js files 
   

2. jQueryは一度だけロードする必要があります。

   二回あなたがタグの順序を制御することはできません状況、またはjQueryの負荷で

Answer 2

、例えばあなたがコンテンツエディタです：

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