如何在Django/AJAX中从窗体创建动态窗体集

Question

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

我想让这种形式出现在页面上的次数与user想要的次数一样多。因此，如果他们填写Language和Level，则会在旧的下方显示新的Language和Level表单。

问题是，如果表格是链接的，我必须分别标识每个Language和Level，所以我不能只复制form这个重复。 （也许我可以，但我无法弄清楚，因为我是AJAX新手）。

这是一个create job 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; 
     } 
    }) 
}); 

和一个简单的观点：

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

Answer 1

要刷新选择选项，您不必标识它们。 如果语言表单是用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; 
     } 
    }) 
});