Select2未应用

Question

I'm trying to use Select2 to replace a multi-select drop down on my site.

The plan is that a user can select a list of countries by typing the country, which will then be auto-completed and stored in a tag-like structure, similar to how StackOverflow tags work.

For some reason, nothing is happening when I call the select2 function in my code.

Below I've included my code and a link to a JSFiddle.

Head:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

JavaScript:

$(document).ready(function() {

    // Countries to choose from

    var countries = [{
        id: 1,
        text: 'United Kingdom'
    }, {
        id: 2,
        text: 'United States of America'
    }, {
        id: 3,
        text: 'Germany'
    }, ];

    // Create countries dropdown
    $('#allowedCountries').select2({
        placeholder: 'Select allowed countries',
        data: countries,
        tags: true,
        tokenSeparators: [',', ' ']
    });
})

JSFiddle https://jsfiddle.net/3ms60wkw/

Answer 1

just call <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
before

     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

and it should work perfectly fine

Answer 2

应该首先加载Jquery，因为select 2取决于JQuery的顶部