Динамическое отображение/скрытие встроенных форм Django Admin на основе выбора выпадающего списка

Я пытаюсь динамически показывать и скрывать инлайн-формы в админке Django на основе выпадающего выбора. У меня есть две инлайн-формы: одна для IndividualCustomer, другая для CorporateCustomer. Цель состоит в том, чтобы соответствующая инлайн-форма появлялась, когда из выпадающего списка выбран определенный тип клиента.

Вот что я установил:

Модели: Я определил модели IndividualCustomer, CorporateCustomer и Customer.

Admin: Я создал инлайны для обоих типов клиентов и включил их в класс CustomerAdmin.

Пользовательский шаблон: Я использую пользовательский change_form.html для реализации логики JavaScript.

Модели и код администратора:

# models.py
from django.db import models

class Customer(models.Model):
    CUSTOMER_TYPE_CHOICES = [
        ('Individual', 'مشتری حقیقی'),
        ('Corporate', 'مشتری حقوقی'),
    ]
    customer_type = models.CharField(max_length=20, choices=CUSTOMER_TYPE_CHOICES)

class IndividualCustomer(models.Model):
    customer = models.OneToOneField(Customer, on_delete=models.CASCADE)
    # Other fields...

class CorporateCustomer(models.Model):
    customer = models.OneToOneField(Customer, on_delete=models.CASCADE)
    # Other fields...

# admin.py
from django.contrib import admin
from .models import Customer, IndividualCustomer, CorporateCustomer

class IndividualCustomerInline(admin.StackedInline):
    model = IndividualCustomer
    extra = 0

class CorporateCustomerInline(admin.StackedInline):
    model = CorporateCustomer
    extra = 0

@admin.register(Customer)
class CustomerAdmin(admin.ModelAdmin):
    inlines = [IndividualCustomerInline, CorporateCustomerInline]

Пользовательский шаблон (change_form.html):

{% extends "admin/change_form.html" %}
{% load i18n static %}

{% block after_field_sets %}
{{ block.super }}

<style>
    .inline-group {
        margin-bottom: 20px;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    function hideAllInlines() {
        const individualInline = document.querySelector('#individualcustomer_set-group');
        const corporateInline = document.querySelector('#corporatecustomer_set-group');

        if (individualInline) individualInline.style.display = 'none';
        if (corporateInline) corporateInline.style.display = 'none';
    }

    function toggleInlines() {
        const customerType = document.querySelector('#id_customer_type').value;
        const individualInline = document.querySelector('#individualcustomer_set-group');
        const corporateInline = document.querySelector('#corporatecustomer_set-group');

        if (customerType === 'Individual') {
            if (individualInline) individualInline.style.display = 'block';
            if (corporateInline) corporateInline.style.display = 'none';
        } else if (customerType === 'Corporate') {
            if (corporateInline) corporateInline.style.display = 'block';
            if (individualInline) individualInline.style.display = 'none';
        } else {
            hideAllInlines();
        }
    }

    hideAllInlines();
    toggleInlines();

    const customerTypeField = document.querySelector('#id_customer_type');
    if (customerTypeField) {
        customerTypeField.addEventListener('change', toggleInlines);
    }
});
</script>
{% endblock %}

Проблема Несмотря на выполнение вышеуказанных действий, обе встроенные формы отображаются изначально, а ожидаемое поведение скрытия одной формы на основе выпадающего выбора не происходит. Вот конкретные проблемы, с которыми я сталкиваюсь:

Встроенные формы IndividualCustomer и CorporateCustomer отображаются при загрузке страницы. Инлайны не переключают видимость при изменении выбора в выпадающем списке. Я получаю консольные ошибки, указывающие на то, что некоторые элементы не найдены, например Individual Inline not found! Что я пробовал Проверил идентификаторы групп инлайнов. Убедился, что JavaScript правильно включен в шаблон. Проверил наличие ошибок JavaScript в консоли.

Как я могу динамически показывать и скрывать встроенные формы админки Django на основе выбора выпадающего списка? Какие изменения нужно внести в JavaScript или шаблон, чтобы инлайн-формы вели себя так, как ожидается?

Вернуться на верх