CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Sahin
Sahin

Reputation: 11

select2 js plugin is not working

I just started using select2 jquery plugin . I am trying it on codepan . I added all cdn link (css,js, jquery etc) .But my select items do not change yet . here is my code : 

<!DOCTYPE html>
<html lang="en">
<head>

<!--  Meta  -->
<meta charset="UTF-8" />
<title>My New Pen!</title>

<!--  Styles  -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div style="width:600px;"> 
    <form action="post"> 
        <select name="" id="myselection"> 
            <option value="dhaka"> Dhaka </option>
            <option value="braishal"> Barishal </option>
            <option value="Khulna"> Khulna </option>
            <option value="rajshahi"> Rajshahi </option>
            <option value="dinajpur"> Dinajpur </option>
        </select>
    </form>
</div>

<!-- Scripts -->
<script src="scripts/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript"> 
    $(document).ready(function() {
$('#myselection').select2();
   });
  </script>
</body>
</html>

Upvotes: 0

Views: 4660

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14531

JQuery must be imported before Select2 script for it to work.

So the correct import order should be:

  1. jQuery
  2. Select2
  3. Page specific Javascript

<!DOCTYPE html>
<html lang="en">
<head>

<!--  Meta  -->
<meta charset="UTF-8" />
<title>My New Pen!</title>

<!--  Styles  -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div style="width:600px;"> 
    <form action="post"> 
        <select name="" id="myselection"> 
            <option value="dhaka"> Dhaka </option>
            <option value="braishal"> Barishal </option>
            <option value="Khulna"> Khulna </option>
            <option value="rajshahi"> Rajshahi </option>
            <option value="dinajpur"> Dinajpur </option>
        </select>
    </form>
</div>

<!-- Scripts -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="scripts/index.js"></script>

<script type="text/javascript"> 
    $(document).ready(function() {
$('#myselection').select2();
   });
  </script>
</body>
</html>

Upvotes: 4

Related Questions