jquery - Uncaught TypeError: $(...).select2 is not a function

Question

I download the select2 package and include the two files select2.min.css and select2.min.js into my laravel public file, select2.min.css into public/css folder and select2.min.js into public/js folder And I want to do a multiple select on my page. Here is my "select" like:

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

And this is my <script> section:

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

I don't know the multiple select is not working and browser always show "Uncaught TypeError: $(...).select2 is not a function"

Has everyone met this problem before?

Answer 1

Most possible reason is to load jQuery twice. The second time when jQuery loaded it removes registered plugins.

Solution is

1. Script loading should be in corrected order. That is

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

2. jQuery should be loaded only once.