[Django]-Django Admin Show / Hide Fields If Specific Value Is Selected In A Dropdown

21👍

Purpose of this question: to show / hide a fieldset if a specific option is selected in a Django admin form dropdown.

Solution overview: you need to break fieldsets up into two instead of one, custom javascript, define Media class in ModelAdmin.

[Step One] In my project named dropdown, I added the following folders / files:

  • static (directory)
  • static/dropdown (directory)
  • static/dropdown/js (directory)
  • static/dropdown/js/base.js (file)

[Step Two] In admin.py, a few things to note:

  1. I broke fieldsets up into two instead of one.
  2. Notice that I’m defining classes for each fieldset. abcdefg is the name of the class of the fieldset I’m trying to show and hide.
  3. I defined class Media. This tells django where to look for custom javascript and css files.

admin.py

from django.contrib import admin
from dropdown.models import DropdownModel
from dropdown.forms import DropdownModelForm

class DropdownModelAdmin(admin.ModelAdmin):

    fieldsets = (
        ('Date Range', {
            'fields': ('date_range',),
            'classes': ('predefined',)
        }),
        (None, {
            'fields': (('start_date', 'end_date'),),
            'classes': ('abcdefg',)
        })
    )

    form = DropdownModelForm

    class Media:
        js = ('dropdown/js/base.js',)

admin.site.register(DropdownModel, DropdownModelAdmin)

[Step Three] Add javascript.
I take no credit for this script; I only modified it slightly from here.

base.js

(function($) {
    $(function() {
        var selectField = $('#id_date_range'),
            verified = $('.abcdefg');

        function toggleVerified(value) {
            if (value === 'Custom') {
                verified.show();
            } else {
                verified.hide();
            }
        }

        // show/hide on load based on existing value of selectField
        toggleVerified(selectField.val());

        // show/hide on change
        selectField.change(function() {
            toggleVerified($(this).val());
        });
    });
})(django.jQuery);

[Step Four]

forms.py

from django import forms
from dropdown.models import DropdownModel

class DropdownModelForm(forms.ModelForm):

    class Meta:
        model = DropdownModel
        fields = ('date_range',)
        widgets = {
            'date_range': forms.Select(choices=DropdownModel.CHOICES)
        }
👤Jarad

Leave a comment