如何获得相互依存的下拉列表中使用的ModelForm和jQuery Django的？(How to

我是新来的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创建表单，这不符合我的需求。

请指导我做这件事。

谢谢

Answer 1:

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

自定义Django的表单域（在雏型）
阿贾克斯（获取记录）
simplejson（派JSON响应于AJAX）
jQuery的（以更新客户端上的组合框）

让我们来看一个例子（没有真正测试了这个，就从我的脑海的顶部）：

Models.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的方法来获取数据，并填充select的HTML元素。

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

Answer 2:

而不是重新发明轮子，我会用Django的智能选择或者Django的自动完成光

我还没有尝试要么还没有，但我对使用一个或两个人在即将开展的项目。