CODEWITHSUNDEEP
javascriptjqueryselectdrop-down-menu
utkarsh2k2
utkarsh2k2

Reputation: 1096

Select2 plugin (multiple select input) doesn't work

I am trying to replicate a simple select2 example to display a multiple-select input field, here is the link http://jsfiddle.net/marcusasplund/jEADR/2/.

Here is my code (index.html):

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script type="text/javascript">
        $("#e1").select2();
    </script>
</head>

<body>
<label>Select Locations</label>
    <select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
</body>

The result I get is:

enter image description here

I wrote the code in a simple text file and changed the extension to .html

I have tried both chrome and firefox, but get the same result. Any ideas?

Upvotes: 1

Views: 725

Answers (1)

Titus
Titus

Reputation: 22474

You need to wait until the document is fully loaded, try to modify the content of your script tag to something like this:

$(document).ready(function(){
    $("#e1").select2();
});

Upvotes: 1

Related Questions