How to get dynamic choices field in admin panel of django- category sub-category

Question

I have tried this a lot and searched about it too but not found any solution, I want that in admin panel when admin selects the category choice field and the subcategory choice field changes according to it, like I have a category called 'Shoes' and 'watches' and sub-category accordingly for shoes - 'puma', 'Adidas' and watches-'titan', 'G-shock'. when admin selects category 'shoes' subcategory choices should be 'puma' and 'Adidas' and if he/she selects category 'watches' subcategory choices should be 'titan' and 'G-shock'.

here is my models.py

from django.db import models
from django.db import connection

# Create your models here.

class categorie(models.Model):
    name = models.CharField(max_length=100, unique=True)

    def __str__(self):
        return self.name

class sub_categorie(models.Model):
    sub_name = models.CharField(max_length=100)
    catagory_name = models.ForeignKey(categorie, on_delete=models.CASCADE, default=1)

    def __str__(self):
        return self.sub_name

class Products(models.Model):
    Product_Name = models.CharField(max_length=100)
    price = models.FloatField()
    Description = models.TextField()
    ctg = models.ForeignKey(categorie, on_delete=models.CASCADE,blank = False,  default=1)
    sub_category = models.ForeignKey(sub_categorie, on_delete=models.CASCADE,blank = False)

Answer 1

Doing this is possible when you have UI control. I would suggest first having your custom JS in the Admin Panel to Add Field and its choices based on the value of category field.

To add choices to the Admin Panel you can add choices attribute in your model field.

product_type = [('shoes','Shoes'),('watches','Watches')]

class categorie(models.Model):
    name = models.CharField(max_length=100, unique=True,choices=product_type)

Now you need to add js to Admin Panel :How to load Custom JS in Django Admin Home You can try this or a similar approach and check for the value of the field categorie in your JS and when it changes to lets say 'Shoes' then you need to add the field sub category with choices in select as 'Adidas,Puma,Nike,Reebok etc'.

---

UPDATE 1: How to add custom JS in particular field: When you have model in your app ,lets take the same categorie you have name as your field.You go to the ADMIN PANEL for this model, your field will have id as id_name as default.So your input will look something like.

<input type="text" name="name" class="vTextField" maxlength="100" id="id_name">

So you now have the id of your field in your admin forms.So for every fieldname you have id as id_fieldname. You can add an Event Listener in JS for that field on value change.

document.getElementById('id_fieldname').addEventListener('change',function(){
#Do what you want here
});

So in that function either you can call another function that adds the select input field which have the required options or have the field already there and just insert options in the select field.