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;
         }
     })
});

如何在Django / AJAX

1 个答案: