如何使用 Modelform 和 jquery 在 django 中获取相互依赖的下拉菜单？

关键词：

【中文标题】如何使用 Modelform 和 jquery 在 django 中获取相互依赖的下拉菜单？【英文标题】：How to get Interdependent dropdowns in django using Modelform and jquery? 【发布时间】：2012-12-16 18:23:01 【问题描述】：

我是 django 和 jquery 的新手。我正在开发一个基于 django 的应用程序，其中一个表单中有 3 个下拉菜单。 1.校园 2.学校 3. 中心

层次结构是校园有学校，学校有中心。我想链接这些下拉菜单。

例如，我有 3 个校区，例如 Campus1、Campus2、Campus3。如果我选择 Campus1，我应该只选择 Campus1 中的学校并继续此操作，如果我选择 School1，那么我需要能够选择 School1 的中心，并且所有其他选项都应该被隐藏。

我在网上搜索并尝试过这个http://blog.devinterface.com/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/ 但这似乎对我不起作用。 我也检查了这个http://www.javascriptkit.com/script/script2/triplecombo.shtml 但由于我使用 ModelForm 创建表单，这不符合我的需求。

请指导我这样做。

谢谢

【问题讨论】：

【参考方案1】：

您可能需要使用以下技术：

自定义 Django 表单字段（在模型表单内） ajax（获取记录） simplejson(向ajax发送json响应) jquery（更新客户端的组合框）

让我们看一个例子（没有真正测试过，只是我的想法）：

模型.py

from django.db import models

class Campus(models.Model):
    name = models.CharField(max_length=100, choices=choices.CAMPUSES)

    def __unicode__(self):
        return u'%s' % self.name

class School(models.Model):
    name = models.CharField(max_length=100)
    campus = models.ForeignKey(Campus)

    def __unicode__(self):
        return u'%s' % self.name

class Centre(models.Model):
    name = models.CharField(max_length=100)
    school = models.ForeignKey(School)

    def __unicode__(self):
        return u'%s' % self.name

Forms.py

import models
from django import forms

class CenterForm(forms.ModelForm):
    campus = forms.ModelChoiceField(queryset=models.Campus.objects.all())
    school = forms.ModelChoiceField(queryset=models.School.objects.none()) # Need to populate this using jquery
    centre = forms.ModelChoiceField(queryset=models.Centre.objects.none()) # Need to populate this using jquery

    class Meta:
        model = models.Center

        fields = ('campus', 'school', 'centre')

现在，在您的视图中编写一个方法，该方法返回一个 json 对象，用于校园下的学校和学校下的中心：

Views.py

import models
import simplejson
from django.http import HttpResponse

def get_schools(request, campus_id):
    campus = models.Campus.objects.get(pk=campus_id)
    schools = models.School.objects.filter(campus=campus)
    school_dict = 
    for school in schools:
        school_dict[school.id] = school.name
    return HttpResponse(simplejson.dumps(school_dict), mimetype="application/json")

def get_centres(request, school_id):
    school = models.School.objects.get(pk=school_id)
    centres = models.Centre.objects.filter(school=school)
    centre_dict = 
    for centre in centres:
        centre_dict[centre.id] = centre.name
    return HttpResponse(simplejson.dumps(centre_dict), mimetype="application/json")

现在编写一个 ajax/jquery 方法来获取数据并填充 HTML 中的 select 元素。

AJAX/jQuery

$(document).ready(function()
    $('select[name=campus]').change(function()
        campus_id = $(this).val();
        request_url = '/get_schools/' + campus_id + '/';
        $.ajax(
            url: request_url,
            success: function(data)
                $.each(data, function(index, text)
                    $('select[name=school]').append(
                         $('<option></option>').val(index).html(text)
                     );
                );
            
        );
        return false;
    )
);

【讨论】：

在任何地方都使用 ModelChoiceField 会使 ModelForm 的用途无效。 Select 也是默认小部件，您无需声明它。显然，根据 OP 的描述，学校与具有外键的 Campuses 相关。 我同意如果实际代码仅限于上述示例，它可能会使 ModelForm 的目的无效。请注意模型和表单的实际代码可能会有所不同，以上仅为示例。 当然在表格和模型没有直接对应关系的情况下可能会有所不同。由于 OP 没有明确描述他的模型，我只是同意你只是一个例子。我只是想说明一些对于 django 新手来说可能不会立即显而易见的事情。 无论哪种方式，您都应该为您的完整解决方案获得 +1。 非常感谢您的回复。我会试试这个然后回来。【参考方案2】：

我不会重新发明***，而是使用Django Smart Selects 或Django Autocomplete Light

我还没有尝试过，但我将在即将进行的项目中使用其中一个或两个。

【讨论】：

django - 使用 FormView 和 ModelForm 更新模型

】django-使用FormView和ModelForm更新模型【英文标题】：django-updatemodelwithFormViewandModelForm【发布时间】：2014-03-0314:59:37【问题描述】：我不知道如何在FormView中使用ModelForm来更新已经存在的实例？？此URL上的POST表单：r\'/object/(?P&lt... 查看详情

如何在 Django 的 ModelForm 中使用请求

】如何在Django的ModelForm中使用请求【英文标题】：HowtousetherequestinaModelForminDjango【发布时间】：2012-02-0902:54:28【问题描述】：我想创建一个查询集，将当前用户用作ModelForm中的过滤器：classBookSubmitForm(ModelForm):book=forms.ModelChoiceField... 查看详情

如何在 ModelForm 中使用 forms.ChoiceField()？

】如何在ModelForm中使用forms.ChoiceField()？【英文标题】：Howtouseforms.ChoiceField()insideModelForm?【发布时间】：2017-04-1415:05:24【问题描述】：我想使用ModelForm在我的表单中显示一个下拉列表。我的代码添加在下面-fromdjangoimportformsfromdjang... 查看详情

如何在 django 1.9 之后使用 modelform 创建禁用字段 [重复]

】如何在django1.9之后使用modelform创建禁用字段[重复]【英文标题】：HowcanImakeadisablefieldwithmodelformafterdjango1.9[duplicate]【发布时间】：2017-08-0322:16:03【问题描述】：我想在django1.11上使用ModelForm创建禁用字段。我读到django从1.9开始就... 查看详情

如何在 ModelForm 中使用 admin.TabularInline

】如何在ModelForm中使用admin.TabularInline【英文标题】：Howtouseadmin.TabularInlineinaModelForm【发布时间】：2013-05-2007:34:42【问题描述】：全文Onlyvalidateadminformifconditionistrue我正在尝试验证表单是否有答案。为了在管理员中验证表单，您需... 查看详情

如何使用 Ajax 在 Django 中更新 modelForm

】如何使用Ajax在Django中更新modelForm【英文标题】：HowtoupdateamodelForminDjangowithAjax【发布时间】：2015-12-2216:46:11【问题描述】：我想用Ajax更新一个模板。我的问题是：我在表单的列表中选择了一个客户，然后在第二个列表中的同一... 查看详情

使用 Django，如何在模板中动态设置 ModelForm 字段值？

】使用Django，如何在模板中动态设置ModelForm字段值？【英文标题】：UsingDjango,howdoIsetaModelFormfieldvaluedynamicallyinthetemplate?【发布时间】：2021-01-2722:31:43【问题描述】：我正在尝试利用复选框字段为用户选择的收藏夹创建模型实例。... 查看详情

如何在modelform中给出初始值

】如何在modelform中给出初始值【英文标题】：Howtogiveinitialvalueinmodelform【发布时间】：2010-11-0611:23:12【问题描述】：如何为ModelForm中的字段分配初始值？例如：classForm1(forms.Form):title=forms.CharField(initial="hello")使用modelForm的等价物是... 查看详情

Django Ajax ModelForm 向 request.POST 提交一个空表单

】DjangoAjaxModelForm向request.POST提交一个空表单【英文标题】：DjangoAjaxModelFormsubmitsanemptyformtorequest.POST【发布时间】：2013-08-1103:47:31【问题描述】：在django、ajax和jquery方面我有点新手，所以如果我的问题变得微不足道，我提前道歉... 查看详情

使用 jquery datepicker 渲染 django ModelForm

】使用jquerydatepicker渲染djangoModelForm【英文标题】：renderingdjangoModelFormwithjquerydatepicker【发布时间】：2016-08-1407:20:47【问题描述】：我正在尝试的每个人，现在知道该怎么做了吗？models.py....classProductsTbl(models.Model):model_number=models.Ch... 查看详情

cbv模式和modelform组件

一、CBV模式和FBV模式FBV模式（functionbaseviews）：就是在视图里使用函数处理请求CBV模式（classbaseviews）就是在视图里使用类处理请求CBV模式的优点主要下面两种：    提高了代码的复用性，可以使用面向对象的技术... 查看详情

如何使用预先填写的必填字段实例化 Django ModelForm？

】如何使用预先填写的必填字段实例化DjangoModelForm？【英文标题】：HowtoinstantiateaDjangoModelFormwithpre-filledrequiredfields?【发布时间】：2018-07-2517:22:13【问题描述】：我有一个ModelForm、FamilyDemographicsForm的子类，其中需要两个ChoiceField... 查看详情

如何在 Django ModelForm 中获取实例

】如何在DjangoModelForm中获取实例【英文标题】：HowgetInstanceinDjangoModelForm【发布时间】：2017-08-1712:27:14【问题描述】：我正在尝试使用基于类的通用视图UpdateView更新Django中的模型。但是我遇到了一些实例问题。当我单击提交按钮... 查看详情

如何将 CreateView 与 ModelForm 一起使用

】如何将CreateView与ModelForm一起使用【英文标题】：HowdoIuseCreateViewwithaModelForm【发布时间】：2011-08-1200:53:20【问题描述】：提交表单时，我的班级AuthorCreateForm出现错误。名称错误自我没有定义如何使用CreateForm？我在我的Author.py文... 查看详情

Django - 带有 ModelForm 的属性和重新定义的字段？

】Django-带有ModelForm的属性和重新定义的字段？【英文标题】：Django-attributesandredefinedfieldswithaModelForm?【发布时间】：2018-08-1201:38:37【问题描述】：我一直在学习表单以及现在的ModelForms是如何工作的。在MaxGoodridge的视频中，他在Mo... 查看详情

如何在 django modelform 中的必填字段后添加 *？

】如何在djangomodelform中的必填字段后添加*？【英文标题】：Howadda*afterrequiredfieldsindjangomodelform?【发布时间】：2012-10-1406:09:29【问题描述】：我有一个djangomodelform，其中一些字段是必需的。我正在使用form.as_p，我没有单独访问这... 查看详情

如何使用特定用户拥有的对象创建 ModelForm [重复]

】如何使用特定用户拥有的对象创建ModelForm[重复]【英文标题】：HowtocreateModelFormwithobjectsthatareownedbyaparticularuser[duplicate]【发布时间】：2012-07-0712:20:22【问题描述】：可能重复：HowdoIfilterForeignKeychoicesinaDjangoModelForm?假设我有一些... 查看详情

modelform(代码片段)

ModelForm为了简单我们今天不撩妹,专聊一个神奇的宝贝组件modelform,看到这个单词我们就明白这个组件就是把model和form组合起来,大家记住了!就比如我们在使用的数据库中建立了一个客户表,字段有姓名,年龄,爱好,邮箱,电话,住址,注... 查看详情