1👍
✅
======== 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 =========
======= multiple select ==============
Source:stackexchange.com