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?

@NickZhang what Barmar means is to make sure you haven't loaded another instance of jQuery anywhere else in your page. Doing so will replace the first one and thus, remove any registered plugins — Phil, Sep 21 '16 at 23:39

score 10 · Answer 1 · edited Jun 17 '17 at 16:13

10

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

Solution is

Script loading should be in corrected order. That is
```
1. jQuery,
2. select2,
3. your js files
```
jQuery should be loaded only once.

edited Jun 17 '17 at 16:13

Akbar Badhusha

2,415
18
30

answered Mar 08 '17 at 12:15

Harun ERGUL

5,770
5
53
62

In my case it was being referenced twice in the angular 2 project.config.ts – leeroya Aug 16 '17 at 21:22
How can I check if jQuery is loaded twice? I'm using window.$ = window.jQuery = require('jquery'); window.Popper = require('popper.js').default; window.Bootstrap = require('bootstrap'); – Enrique Jul 03 '19 at 13:31

score 4 · Answer 2 · answered Oct 12 '17 at 00:57

In the situation where you have no control of the ordering of the tags, or jQuery loads twice, eg you are a content editor:

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

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

2 Answers2

Linked