Select2
Install the
django_select2
package by running the following command:
pip install django_select2
models.py
class Warehouse(models.Model):
name = models.CharField(max_length=100)
location = models.CharField(max_length=100)
# Add any other fields for the Warehouse model
def __str__(self):
return self.name
class Item(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
quantity = models.PositiveIntegerField()
warehouse = models.ForeignKey(Warehouse, on_delete=models.CASCADE,default=1)
unit = models.ForeignKey(Unit, on_delete=models.SET_DEFAULT, default=1)
price = models.DecimalField(max_digits=10, decimal_places=2, default=0)
Import the necessary modules in your
forms.py
file:
from django import forms
from django_select2.forms import Select2Widget
from .models import Item, Warehouse # my model
class ItemForm(forms.ModelForm):
warehouse = forms.ModelChoiceField(
queryset=Warehouse.objects.all(),
widget=Select2Widget(attrs={'class': 'select2'})
)
myhtml template
<!DOCTYPE html>
<html>
<head>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<!-- Your form or select input -->
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$('.django-select2').select2();
});
</script>
</body>
</html>
Last updated