How to populate choices in second dropdown on the basis of selected value from first dropdown in Django using ModelChoiceFields for both dropdown

Question

I have two dropdown:

Category
Sub Category

Both needs to be populated dynamically

Here I want to populate choices in sub_category on the basic of selected value from category field. So i don't need to save the whole form.

class AddProductForm(forms.Form):
    category = forms.ModelChoiceField(widget=forms.Select(attrs={'class': 'form-control'}),
    queryset=Category.objects.all(), to_field_name="category")
    sub_category = forms.ModelChoiceField(widget=forms.Select(attrs={'class': 'form-control'}))

you can use `django_select2` [link](https://django-select2.readthedocs.io/en/latest/extra.html) — Andrey Maslov, Jun 29 '20 at 13:00

Andrey Maslov · Answer 1 · 2020-07-05T22:16:35.673

example with django_select2 models.py

from django.db import models


class Category(models.Model):
    name_category = models.CharField(verbose_name='Category title', max_length=100, null=True)
    slug = models.SlugField(max_length=160, unique=True, null=True)

    class Meta:
        ordering = ('name_category',)

    def __str__(self):
        return self.name_category


class Subcategory(models.Model):
    category = models.ForeignKey(Category, on_delete=models.CASCADE, verbose_name='Category', related_name='sub')
    name_subcategory = models.CharField(verbose_name='Subcategory title', max_length=100, null=True)
    slug = models.SlugField(max_length=160, unique=True, null=True)

    class Meta:
        ordering = ('category', 'name_subcategory',)

    def __str__(self):
        return self.name_subcategory


class Product(models.Model):
    subcategory = models.ForeignKey(Subcategory, on_delete=models.CASCADE, verbose_name='Category', related_name='prod')
    name_product = models.CharField(verbose_name='Product title', max_length=100, null=True)
    price = models.IntegerField(verbose_name='Price')

    class Meta:
        ordering = ('name_product', )

    def __str__(self):
        return self.name_product

forms.py( i used 'style': 'width:350px;' because i don't have any css in this test project)

from django import forms
from django_select2.forms import ModelSelect2Widget
from .models import Category, Subcategory


class AddProductForm(forms.Form):
    category = forms.ModelChoiceField(
        queryset=Category.objects.all(),
        widget=ModelSelect2Widget(
            search_fields=['name_category__icontains'],
            attrs={'style': 'width:350px;', },
        )
    )
    sub_category = forms.ModelChoiceField(
        widget=ModelSelect2Widget(
            attrs={'style': 'width:350px;', },
            model=Subcategory,
            search_fields=['name_subcategory__icontains'],
            dependent_fields={'category': 'category'},

        ),
        queryset=Subcategory.objects.all(),
    )

views.py

from .forms import AddProductForm


class AddProductView(FormView):
    form_class = AddProductForm
    template_name = "categories/new_product.html"

new_product.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="PATH_TO_JQUERY"></script>
    {{ form.media }}
</head>
<body style="background-color: white;">
    <form>
    <table>
    {{ form.as_table }}
    </table>
    </form>
</body>
</html>

you also need to put path('select2/', include('django_select2.urls')), into your urls.py, 'django_select2' into yout INSTALLED_APPS in settings.py Other thing to mention, that dependent fields work only inside one form and form tag is mandatory

How to populate choices in second dropdown on the basis of selected value from first dropdown in Django using ModelChoiceFields for both dropdown

1 Answers1