Как сделать отзывчивые формы, установленные в цикле "for loop" Django JavaScript

Я пытаюсь сделать форму реагирующей на изменения без обновления страницы с контекстом. Формы построены на Django, а реагирующее поведение происходит на JavaScript. Формы устанавливаются в цикл for в HTML с помощью языка шаблонов Django.

Когда пользователь загружает страницу, и форма_one, и форма_two будут установлены на пустой вариант, при этом форма_one будет заполнена, а форма_two еще не заполнена. Когда пользователь меняет выбор в форме_one, форма_two должна заполниться соответствующим контекстом. Если пользователь снова изменит выбор, форма будет сброшена, а затем заполнена соответствующим контекстом. Я могу получить выбор для любой формы в forms.py или views.py, но не могу получить правильные данные или поведение в шаблоне.

.

forms.py

class ExampleForm(forms.Form):
    form_one = forms.ChoiceField(
        widgets=forms.Select(attrs={'class': 'form-control'},
        label='One',
        required=False,
        choices=[]
    )
    form_two= forms.ChoiceField(
        widgets=forms.Select(attrs={'class': 'form-control'},
        label='Two',
        required=False,
        choices=[(None, '')]
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs):
        logic to build form_one choices

views.py

def example_view(request):
    logic to build form_two choices
    # if condition 1, k = form_one_id, v = {form_two_id: form_two_name}
    # elif condition 2, k = form_one_id, v = {form_two_id: form_two_name}
    # elif condition 3, k = form_two_id, v = form_two_name
    id_name_dict = ...
    context = id_name_dict
    
    return render(request, url, context)

template.html

HTML code
{% for form in forms %}
more HMTL code
{% endfor %}
more HTML code
JS embedded scripts
<scripts>

This is where I am stuck as you can see my failed attempts to access the context.

    let defaultOption = $('#id_form_two option:first-child');  {# get form two default option #}
    let formTwoChoices = '{{ id_name_dict }}'; {# get id_name_dict data #}
    let formOneId = $('#id_form_one option:selected');

    console.log('Test log', defaultOption);
    console.log('Test log', formOneId);
    console.log('Test log', formTwoChoices);
    console.log('Test log', {{ id_name_dict }});
</scripts>

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