Uncaught TypeError: $ (...). Select2 ist keine Funktion

Question

Ich lade das select2-Paket herunter und lege die zwei Dateien select2.min.css und select2.min.js in meine Laravel-Datei, select2.min.css, ein in den Ordner public/css und select2.min.js in den Ordner public/js Und ich möchte eine Mehrfachauswahl auf meiner Seite vornehmen. Hier ist meine „wählen Sie“ wie:

<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>* 

Und das ist mein <script> Abschnitt:

<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> 

Ich weiß nicht, die Mehrfach-Auswahl nicht funktioniert und Browser immer zeigen „Uncaught Typeerror: $ (...) select2 ist keine Funktion "

Hat schon mal jemand dieses Problem gelöst?

Answer 1

Der wahrscheinlichste Grund ist, jQuery zweimal zu laden. Das zweite Mal, wenn jQuery geladen wurde, werden registrierte Plugins gelöscht.

Lösung ist

1. Script Laden in korrigiert sein sollte. Das ist

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

2. jQuery sollte nur einmal geladen werden.

Answer 2

In der Situation, wo Sie keine Kontrolle über die Reihenfolge der Tags, oder jQuery Lasten zweimal, zB Sie ein Editor Inhalt sind:

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