Работа с несколькими зависимыми выпадающими списками в форме с помощью Django и jquery

Я хочу создать форму с 4 выпадающими списками, в которых два из них зависят от двух других, например, у меня есть список стран и городов, в котором город зависит от страны, т.е. при выборе страны в выпадающем списке городов будут отображаться только города этой страны, и это работает отлично, но мой отдел и подразделение не работают так, как ожидалось. Я хочу, чтобы при выборе отдела и подразделения отображались только подразделения этого отдела. Я хочу реализовать это в одной форме.

<form method="post" enctype="multipart/form-data" autocomplete='off' class="mt-3" novalidate id="personForm" data-cities-url="{% url 'ajax_load_cities' %}" data-units-url="{% url 'ajax_load_units' %}">
    <div class="row">
            <div class="col-3">{{ form.country|as_crispy_field}}</div>
            <div class="col-3">{{ form.city|as_crispy_field}}</div>
            <div class="col-3">{{ form.department|as_crispy_field}}</div>
            <div class="col-3">{{ form.unit|as_crispy_field}}</div> 
    </div>
 <script>
    $("#id_country").change(function () {
        const url = $("#personForm").attr("data-cities-url");  
        const countryId = $(this).val();  

        $.ajax({
            url: url,
            data: {
                'country_id': countryId 
            },
            success: function (data) { 
                console.log(data);
                $("#id_city").html(data); 
                });
            }
        });

    });

    $("#id_department").change(function () {
        const url = $("#personForm").attr("data-units-url");
        const departmentId = $(this).val();

        $.ajax({
            url: url, 
            data: {
                'department_id': departmentId 
            },
            success: function (data) { 
                console.log(data);  
                $("#id_unit").html(data);  
            }
        });

    });
</script>

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