Django add select2

Viewed 19

i try to add the Select2 in my django app but i can't use it. What i do wrong ?

Anyone have a solution ?

page.html

<!----Select2----->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!----Select2----->
<script>
$(document).ready(function() {
$('#id_employe').select2();
 });
</script>

Filter from the form

1 Answers
======== Configuration in base.html ========

{% load static %}
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <title>
        {% block title %}
                                      
        {% endblock title %}
    </title>
</head>
<body>
  
  {% block body %}
 
  {% endblock body %}
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    // In your Javascript (external .js resource or <script> tag)
  $(document).ready(function() {
      $('.js-example-basic-single').select2();
  });

</script>
<script>
   $(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

</script>
</body>
</html>


============ select dropdown in index.html =========

{% extends "base.html" %}
{% block title %}
     Index | Page 
{% endblock title %}
   
{% block body %}

<h3>Single select </h3>
<select class="js-example-basic-single" name="state" style="width: 200px;">
<option value="AL">Alabama</option>
     ...
<option value="WY">Wyoming</option>
</select>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h3>Multi select</h3>
<select class="js-example-basic-multiple" name="states['home']" multiple="multiple" style="width: 200px;">
     <option value="AL">Alabama</option>
       ...
     <option value="WY">Wyoming</option>
   </select>

{% endblock body %}
   

======= single select =========

enter image description here

======= multiple select ==============

enter image description here

Related