Question

每次在特定字段中选择下拉值时，我都想填充django表单字段。

示例：

我有一个企业列表（企业A，企业B等）和国家/地区列表。每个业务都位于特定的国家/地区。

Business A --> France
Business B --> Germany
Business C --> England

在我的表单中，当我在dropdown list中选择特定业务时，我想立即用相关国家/地区填充国家/地区字段。如果业务发生变化，关联国家也将发生变化。

我正在使用Django 1.11.18

上下文：

在我的代码中，MemberState对应于上面的示例中的国家，而RBI对应于企业。

我的模型：

class MemberState(models.Model):

    name = models.CharField(max_length=256, verbose_name=_('Name'))
    code = models.CharField(max_length=256, verbose_name=_('Code'))

class RBI(models.Model):

    short_name = models.CharField(max_length=256, verbose_name=_('Short name'), unique=True)
    member_state = models.ForeignKey(MemberState, verbose_name=_('Member State'))
    ...

我的表单：

class FinalProductSearchForm(forms.Form):

    releasing_body = ShortNameModelChoiceField(queryset=RBI.objects.filter(active=True).order_by('short_name'), required=False,
            widget=forms.Select(), empty_label=_('Select'), label=_('Releasing Body/Institution'))
    member_state = forms.ModelChoiceField(queryset=MemberState.objects.filter(active=True).order_by('name'), required=False,
            widget=forms.Select(), empty_label=_('Select'), label=_('Member state'))
    ...

我想在表单中选择一个releasing_body，并预先填写相关的member_state字段。每次更改realeasing_body时，都会加载关联的member_state。

我在Django中尝试了一些操作，但是我需要AJAX请求。不幸的是，我从未做过这种事情。

我的AJAX部分：

所以，这是我的第一次尝试（不起作用）：

我在views.py文件中创建了此功能：

def ajax_member_state_request(request):
    if request.is_ajax():
        release_body = request.GET.get('releasing_body', None)
        print(release_body)
        member_state_ini = ReleaseBodyInstitution.objects.values_list('member_state', flat=True).get(id=release_body)
        print(member_state_ini)
        member_state = MemberState.objects.get(id=member_state_ini)
        print(member_state)
    return JsonResponse({'member_state': member_state})

在我的urls.py文件中，添加了：

url(r'^finalproduct/list/$', FinalProductListView.as_view(),
    name='finalproduct-list'),
url(r'^finalproduct/list/ajax_member_state_request/$', views.ajax_member_state_request, name='ajax_member_state_request'),

最后在我的HTML文件中：

<form id="providerForm" data-provider-url="{% url 'ajax_member_state_request' %}" class="navbar-search" method="GET" action="{{ url }}">

{% csrf_token %}
    <div class="row">
      <div class="col-md-5">
        {{ search_form.releasing_body|as_crispy_field }}
      </div>
      <div class="col-md-5">
        {{ search_form.member_state|as_crispy_field }}
      </div>
    </div>

    <input type="submit" class="btn btn-default" value="{% trans 'Search' %}" />
    <input type="button" class="btn btn-default" name="clear" value="Reset" onclick="clearForm(this.form);">
</form>

AJAX部分如下：

$("#id_releasing_body").change(function () {
  var url = $("#providerForm").attr("data-provider-url");
  var releasingBodyId = $(this).val();

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    data: {
      'releasing_body': releasingBodyId
    },
    success: function (data) {
      $("#id_member_state").val(data.member_state);
    }
  });

});

Answer 1

我将实现一个视图，给定公司名称将返回国家（地区）的JsonResponse（按照您的示例）。

在ajax请求的success部分中，将其设置为国家表格字段的value。

视图：

def contry_for_bussines(request):
    if request.is_ajax():
        member_state = ReleaseBodyInstitution.objects.get(id=release_body).member_state
    return JsonResponse({'member_state': member_state})

在ajax中

$("#id_releasing_body").change(function () {
  var url = $("#providerForm").attr("data-provider-url");
  var releasingBodyId = $(this).val();

  $.get(url, {'releasing_body': releasingBodyId}, function(data){
       $("#id_member_state").text(data.member_state);
  });    
});

Answer 2

检查此方法是否有帮助，我为我的项目执行了这些步骤，并使用AJAX请求成功填充了选择字段。唯一的问题是，尽管在所有字段中都选择了一个值，但提交时表单仍未绑定（现在可以处理）

https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html

使用AJAX查询填充表单字段

2 个答案: