[FIXED] How to change select tag options according to another select tag's option in Django admin?

Issue

I have this in admin.py

class BrandAdmin(admin.ModelAdmin):
    list_display = ('name','category','date')
    form = BrandAdminForm
    class Media:
        js = ('own.js',)

admin.site.register(Brand,BrandAdmin)

and models.py

class Category(models.Model):
    name = models.CharField(max_length=100)

class Subcategory(models.Model):
    name = models.CharField(max_length=100)
    category = models.Foreignkey(Category, on_delete=models.CASCADE)

class Brand(models.Model):
    name = models.CharField(max_length=100)
    category = models.Foreignkey(Category, on_delete=models.CASCADE)
    subcategory = models.Foreignkey(Subcategory, on_delete=models.CASCADE)
    date = models.DateTimeField()

so how can I select brands subcategory according to category ?

Solution

...
import json
...

class BrandAdminForm(forms.ModelForm):
    ''' collecting subcategories and corvert it to json. for use in javascript code '''
    data = {}
    for cat in Category.objects.all():
        data[str(cat.id)]={}
    for sub in Subcategory.objects.all():
        data[str(sub.category.id)][str(sub.id)] = {
                'id': str(sub.id),
                'cat_id': str(sub.category.id),
                'name': str(sub.name)
        }
    data = json.dumps(data)
    ''' converted to json '''

    category = forms.ModelChoiceField(queryset=Category.objects.all(), 
    widget=forms.Select(attrs={'onchange':  'category = this.options[this.selectedIndex].value; var data = ' + data + ';(function(){ var select = document.getElementById("id_subcategory");  select.options.length=0; select.options[select.options.length] = new Option("----",""); for(let [key, value] of Object.entries(data[category.toString()])) { select.options[select.options.length] = new Option(value.ady,value.id); } })()'}));
    class Meta:
        model = Brand
        fields='__all__'


class BrandAdmin(admin.ModelAdmin):
    list_display = ('name','category','date')
    form = BrandAdminForm
    # class Media:
    #     js = ('own.js',)

admin.site.register(Brand,BrandAdmin)

just copy paste this code all you need django-form and some javascript code

widget = forms.Select(attrs={
    'onchange': 'category = this.options[this.selectedIndex].value;   #category on changed
     var data = ' + data + ';(function(){ 
     var select=document.getElementById("id_subcategory"); 
     select.options.length=0; 
     select.options[select.options.length] = new Option("----",""); 
     for(let [key, value] of Object.entries(data[category.toString()])) { 
        select.options[select.options.length] = new Option(value.ady,value.id); 

} })()'}));

Answered By - Nbody

Answer Checked By - Willingham (PHPFixing Volunteer)