Javascript 基于django/js中先前字段的值显示复选框复选框

在我的django项目中，我有一个动态加载问题，由老师制作工作表

问题

我的教室有主题，主题有副标题。我必须为教室创建一个下拉列表，老师可以在其中选择一个班级。根据课程，我将主题显示为复选框，以便老师可以选择各种主题。到目前为止，我已经解决了这个问题。现在，基于选中的主题和所选的类，我想将子主题作为复选框显示给老师

filter.html

<form method="post" id="questionForm" data-topics-url="{% url 'qapp:ajax_load_classroom_topics' %}" 
        data-subtopics-url="{url 'qapp:ajax_load_topics_subtopics'}" novalidate>
        {% csrf_token %}
        <table>
            {{form.as_table}}
        </table>
        <button type="submit">Submit</button>
</form>

<script>
    $("#id_classroom").change(function() {
        var url = $('#questionForm').attr("data-topics-url");
        var classroomId = $(this).val();

        $.ajax({
            url: url,
            data: {'classroom':classroomId},
            dataType: 'json',
            success: function(response_data) {
                $("#id_topic").empty().append(response_data.topics.map((t1) => {
                    return $('<label><input type="checkbox" name="topics_all" value="' +t1.id+ '"/>' +t1.topic_name+'</label>');
                }));
            }
        });
    });
</script>

<script>
    $(".checkbox").change(function(){
        console.log($("#id_topic").val());
    }); // --> stuck here! how to dynamically show subtopics in checkboxes
</script>

我使用的是modelform。如果你需要更多的细节，请告诉我

我搜索过类似的问题，但他们都在解决课堂主题问题。有人能帮我吗

编辑：我对第二个脚本的尝试

---

运行代码时会发生什么？与您希望发生的相反，第一个脚本运行良好。在第二个脚本中，它没有显示任何内容。我还怀疑在第二个脚本中应该使用哪个属性，在哪个属性上应该发生事件。是class还是id，还是像

$input[name=“topics\u all”]

？您需要向服务器发送第二个AJAX请求，并根据所选主题获取子主题列表。这到底有什么问题？你到底被困在哪里？您尝试了什么，它是如何失败的？因此，在views.py中，您可以看到我正在根据教室和主题列表获取子主题。现在我正忙于编写js函数，我该怎么做呢？

def topics_subtopics(request):
    classroom = request.GET.get('classroom')
    topics = request.GET.getlist('topics_all[]')
    temp_subtopics = SubTopic.objects.filter(classrooms__classroom=classroom).filter(topic__id__in=topics)
    subtopics = temp_subtopics.order_by('subtopic_name').values('subtopic_name', 'id')
    response_stopics = {}
    try:
        response_stopics['subtopics'] = list(subtopics)
    except:
        response_stopics['error'] = "No Subtopics available in this class and Topics"
    print(response_stopics)
    print('classroom', classroom)

    return JsonResponse(response_stopics)

<script>
    $('.checkbox').on('click', (function() {
        var url = $('#questionForm').attr("data-subtopics-url");
        var classroomId = $('#id_classroom').val();
        var topicsId = $(this).val();
        $.ajax({
            url:url,
            data:{
                'classroom':classroomId,
                'topics_all':topicsId
            },
            success: function(response_stopics) {
                $("id_subtopic").empty().append(response_stopics.subtopics.map((st1) => {
                    return $('<div class="stopics"><label><input type="checkbox" name="subtopics_all" value="'+ st1.id+'"/>'+st1.subtopic_name+'</label>');
                }));
            }
        });
    }));
</script>

class QuestionFilterForm(forms.ModelForm):

DIFFICULTY = (('l', 'Low'), ('m', 'Medium'), ('h', 'High'))
CLASSROOM = (('1','I'), ('2','II'), ('3','III'), ('4','IV'), ('5','V'))

def __init__(self, *args, **kwargs):
    super(QuestionFilterForm, self).__init__(*args, **kwargs)
    self.fields['classroom'] = forms.ChoiceField(choices=self.CLASSROOM)
    self.fields['topic'] = forms.ModelMultipleChoiceField(queryset=Topic.objects.none(),
                                                        widget=forms.CheckboxSelectMultiple
                                                    )
    self.fields['difficulty'] = forms.MultipleChoiceField(choices=self.DIFFICULTY,
                                                        widget=forms.CheckboxSelectMultiple,
                                                        required=True
                                                    )
    self.fields['subtopic'] = forms.ModelMultipleChoiceField(queryset=SubTopic.objects.none(),
                                                        widget=forms.CheckboxSelectMultiple
                                                    )

class Meta:
    model = Questions
    fields = ['classroom', 'topic', 'difficulty', 'subtopic']