CODEWITHSUNDEEP
javascriptjqueryjquery-select2
d.abyss
d.abyss

Reputation: 212

Select2 not being applied

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/

Upvotes: 0

Views: 2183

Answers (2)

geekbro
geekbro

Reputation: 1323

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

Upvotes: 4

user6778410
user6778410

Reputation:

Jquery should be loaded first because select 2 depends on top of JQuery

Upvotes: 0

Related Questions