Question

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

问题

我有教室有主题，主题有SubTopics。我必须为教室创建一个下拉菜单，教师可以选择一个班级。基于课程，我将主题显示为复选框，以便教师可以选择各种主题。到目前为止我已经解决了这个问题。现在基于选中的主题和选定的类，我想将子主题显示为教师的复选框。

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>

views.py for ajax_load_topics_subtopics网址

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)

我正在使用modelform。如果您需要更多详细信息，请告诉我们。

我搜索过类似的问题，但他们都在解决课堂主题问题。任何人都可以帮助我吗？

编辑：我尝试第二个剧本

<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>

forms.py

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']

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

0 个答案: