我正在处理一个包含两个表单的页面。其中一种形式是常规形式 - 名称、描述、注释等。第二种形式是两个下拉菜单 - Language 和 Level 其中 Level使用 AJAX 与 Language 链接。

我想让此表单在页面上出现的次数与用户想要的次数相同。因此，如果他们填写Language和Level，则会在旧表格下方出现新的Language和Level表格。

问题是，如果表单是链接的，我必须分别识别每种语言和级别，这样我就不能只复制表单重复此。 (也许我可以，但我无法弄清楚，因为我是 AJAX 新手)。

这是一个创建作业 django/html:

{% extends 'base.html' %} 
{% load crispy_forms_tags %} 
{% load static %} 
{% block head %} 
    <script src="{% static  "js/main.js" %}"></script> 
{% endblock %} 
{% block content %} 
    {% if user.is_authenticated %} 
        <form action="" method="post" enctype="multipart/form-data">{% csrf_token %} 
            {{ language_form }} 
            <button value="Update" type="submit">Submit</button> 
        </form> 
    {% endif %} 
{% endblock %} 

这是 JQuery:

 $(document).on('change','#id_language',function(){ 
     language_id = $(this).val(); 
     request_url = '/get-highest-level/'+language_id+'/'; 
     $.ajax({ 
         url:request_url, 
         success: function(data){ 
             var select = $('#id_level'); 
             select.empty(); 
             $.each(data, function (key,value) { 
                 $('select[name="level"]').append('<option value="'+ key + '">'+value + '</option>'); 
             }); 
             return false; 
         } 
     }) 
}); 

还有一个简单的 View :

@login_required 
def create_order(request): 
    language_form = LanguageLevelForm(request.POST or None) 
    return render(request,'auth/jobs/create-job-test.html',context={'language_form':language_form}) 

我知道应该可以使用 FormSet，但我不知道如何使其与 JQuery 一起使用。

请您参考如下方法:

要刷新选择的选项，您不必识别它们。 如果语言形式用 div 或其他东西包裹，则语言选择只有一个最接近的级别选择。

$(document).on('change','select.language',function(){ // use class, not id 
     language_id = $(this).val(); 
     request_url = '/get-highest-level/'+language_id+'/'; 
     var language = $(this); 
     $.ajax({ 
         url:request_url, 
         success: function(data){ 
             //find closest select with class "level" 
             var select = language.closest('select.level');  
             select.empty(); 
             $.each(data, function (key,value) { 
                 // use select found above. 
                 select.append('<option value="'+ key + '">'+value + '</option>'); 
             }); 
             return false; 
         } 
     }) 
}); 

同样，您可以更改它们的属性而无需识别。

$('select.language').each(function(index){ 
    $(this).attr('name', 'language' + index); 
}); 

编辑:使用您的示例 HTML，尝试这个..

$(document).on('change','select[id$="language"]',function(){ // id ends with 'language' 
     language_id = $(this).val(); 
     request_url = '/get-highest-level/'+language_id+'/'; 
     var level_select_id = $(this).attr('id').replace('language', 'level'); // tricky.. 
     $.ajax({ 
         url:request_url, 
         success: function(data){ 
             var select = $('#' + level_select_id); // use id string found above 
             select.empty(); 
             $.each(data, function (key,value) { 
                 select.append('<option value="'+ key + '">'+value + '</option>'); 
             }); 
             return false; 
         } 
     }) 
});