Как реализовать зависимые выпадающие списки в Django formset
Ниже представлен код скриптов, которые хорошо работают в наборе форм Django, но только в первом наборе форм. Когда я добавляю еще один, он показывает мне список компонентов только первого продукта.
Как я могу сделать функцию выпадающего списка более динамичной, чтобы она меняла, например, form-0
на form-1
при создании второго набора форм?
Буду благодарен за любую помощь.
мой html-файл
<body>
<form id="form-container" method="POST" data-components-url="{% url 'ajax_load_components' %}">
{% csrf_token %}
{{ce_request_formset.management_form}}
{% for form in ce_request_formset %}
<div class="ce-request-form">
{{ form|crispy }}
</div>
{% endfor %}
<button id="add-form" type="button">Add component</button>
<button type="submit">Send CE</button>
</form>
</body>
<script>
// Script to handle adding new forms in html file
let CERequestForm = document.querySelectorAll(".ce-request-form")
let container = document.querySelector("#form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = CERequestForm.length-1
addButton.addEventListener('click', addForm)
function addForm(e){
e.preventDefault()
let newForm = CERequestForm[0].cloneNode(true)
let formRegex = RegExp(`form-(\\d){1}-`,'g')
formNum++
newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)
container.insertBefore(newForm, addButton)
totalForms.setAttribute('value', `${formNum+1}`)
}
// Script to handle dependent dropdown lists
$("#id_form-0-related_product").change(function () {
var url = $("#form-container").attr("data-components-url");
var related_product_id = $(this).val();
$.ajax({
url: url,
data: {
'related_product': related_product_id
},
success: function (data) {
$("#id_form-0-related_component").html(data);
}
});
});
</script>