show/hide django admin form field based on selection in another field

Question

I am trying to have a Django admin form field to be hidden until I select a specific value from a drop-down

I have tried everything including Jquery, the Jquery files load properly so my static root is pointing to the right file but when the admin site load and I change the values on the drop-down nothing happens.

I am using the latest Django and python 3.7 also I am using Django-jet as a customize admin template

models.py

class Incident(models.Model):
    Incident_Type =models.ForeignKey(IncidentType,on_delete=models.DO_NOTHING, 
    null=True, blank=False)
DEM_REASON_CHOICES = (("Payments", "Payments"), ("Policies", "Policies"), ("Legal Issues", "Legal Issues"), ("Deactivation", "Deactivation"))
    demonstration_reason = models.CharField(max_length=200, choices=DEM_REASON_CHOICES, null=True, blank=True)

admin.py

@admin.register(IncidentType)
class IncidentTypeAdmin(admin.ModelAdmin):

@admin.register(Incident)
class IncidentAdmin(admin.ModelAdmin):
    form = IncidentAdminForm

forms.py

from django import forms
from .models import Incident

class IncidentAdminForm(forms.ModelForm):
    class Meta:
        model = Incident
        widgets = {
            'demonstration_reason': forms.SelectMultiple,
        }
        fields = "__all__"
    class Media:
        js = ('jet/showhide.js',)

My Jquery script

(function($) {
    $(function() {
        var selectField = $('#id_Incident_Type'),
            verified = $('#id_demonstration_reason');

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

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

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

I am loading the script in my base.html like this

{% block scripts %}
<script src="{% static 'jet/showhide.js' %}"></script>
{% endblock %}

and when I run the server the js script load with the following message "GET /static/jet/showhide.js HTTP/1.1" 304 0

I want demonstration_reason field ('#id_demonstration_reason') to be hidden until I select demonstaration from Incident_Type field ('#id_Incident_Type')

but with the current code when I go to the admin page and click on the model the demonstration_reason field is not hidden and nothing happens when I change the value of Incident_Type

Answer 1

I'd suggest select2. The library has a lot of other functionality, but chaining fields is what you're trying to do.

https://django-select2.readthedocs.io/en/latest/extra.html#chained-select2