您如何根据选择菜单（下拉列表）实现输入（或表单）？

Question

我正在研究评分系统，目前正在研究处理用户输入学生结果的表单，现在我拥有的表单有 2 个依赖的下拉列表（教室、学生）。 问题和我被困的地方是

• 当用户选择教室时，第二个下拉菜单将仅显示该班级的学生，我已经弄清楚了..问题是我希望显示学生正在做多少科目的输入字段，以便用户可以输入班级中特定于该学生的每个科目的成绩

例如，如果我选择教室 1b 并选择学生 Mary.. 如果 Mary 正在做 5 个科目，那么应该出现 5 个输入字段，以便我可以输入科目的分数

链接显示我正在谈论的视频显示示例https://drive.google.com/file/d/11FoCZyOBVdUhTcvCqA1Ke0fEgRmMVC-G/view?usp=drivesdk

模型.py

    
        Class Classroom(models.Models): name = models.charfield()
    
        Class marks (models.Models): classroom = models.foreignkey(Classroom) Grade = models.Floatfield()

html表单

    <div class="container-fluid">
        <form id="result-form" method="post">
            {% csrf_token %}
            <!-- Modal -->
    
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel"> {% block modal-title%} Add Result {% endblock%}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12" id="msg8" style="font-size: 2rem; color:rgb(255, 144, 47)"></div>
    
                    <div class="col-md-12 form-group p-2">
                        <label class="form-label">Class Name</label>
                        {% render_field form.room class+="form-control" %}
                    </div>
    
                    <div class="col-md-12 form-group p-2">
                        <label class="form-label">Exam Name</label>
                        {% render_field form.exam class+="form-control" %}
    
                    </div>
    
                    <div class="col-md-12 form-group p-2">
                        <label class="form-label">Student</label>
                        {% render_field form.student class+="form-control select2" %}
                    </div>
                 <div class="hidden" id="subject-fields"></div>
    
                    <div class="form-group mb-3 pt-2">
                        <button type="button" id="resBtn" class="btn btn-info" title="Add">Submit</button>
                    </div>
                </div>
            </div>
    
        </form>
    </div>
    
    {% block script%}
    
                
   
    
    {% endblock%

脚本

    $(document).on('click', '#submit-btn', function(event){
            var response_data = []
            var subject_name= $('.course');
            var subject_objs = $('.subject_id');
    

for(i=0;i<subject_name.length;i++){
        
        var subject_id = $(subject_objs[i]).find('input').val();
       
            var grade_input = {
                
                "Marks": subject_id,
                
            }
            response_data.push(grade_input);
        }
        $.ajax({
            type: "POST",
            url: "{% url 'marks' %}",
            data: response_data,
            success: function(response){
                alert("Success");
            }
        });
    });

这就是您的视图应该是什么样子。

def question_choice_view(request): if request.method == "POST": question_choice_data = request.POST['data']

Answer 1

我不是 jQuery 用户。 据我所见，我会通过.addEventListener('change', (event) See here在学生表单上放置一个事件监听器。每次选择选项发生变化时，这都会触发一个函数。这样，​​您还可以收集选择教室和学生姓名的选项值，并请求获取所选学生的主题名称。成功响应后，我将通过 JavaScript 在 DOM 中插入主题字段。

**

 function createInput(item) { // This function takes a item and creates a new input var newLabel = ' <br><label for="$item-mark">$item:</label>' var newInput = '<input type="text" id="$item-mark-id" name="$item-mark"><br><br>'; newLabel = newLabel.replaceAll("$item", item) newInput = newInput.replaceAll("$item", item) // combine into a single str newInput = newLabel + newInput var studInput = document.getElementById("student-id"); // insert element inputs after student studInput.insertAdjacentHTML('afterend', newInput); } function cleanOldInputs(item) { var oldELement = item + "-mark-id" oldELement = document.getElementById(oldELement) if (oldELement) { // remove old label and input oldELement.previousSibling.remove() oldELement.remove() } else {} } function getAPIcall() { // This is what your API sends var responsObject = ["writing", "creativity"]; // loop throug responsObject.forEach(item => { // if you already picked a student clean old inputs from DOM cleanOldInputs(item) // send to function for input creation createInput(item) }) } // get the Student Input var studentSelect = document.getElementById("student-id"); studentSelect.addEventListener("click", function() { // Fire anything you like getAPIcall() });

 <form action="/action_page.php"> <label for="student">Choose a student:</label> <select name="student" id="student-id"> <option value="harry">harry</option> <option value="ivy">ivy</option> </select> </form>

又快又脏**