我是 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 创建表单,这不符合我的需求。
请指导我做到这一点。
谢谢
最佳答案
您可能需要使用以下技术:
- 自定义 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
表单.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')
现在,在您的 View 中编写一个方法,返回校园下的学校和学校下的中心的 json 对象:
View .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;
})
});
关于jquery - 如何使用 Modelform 和 jquery 在 django 中获取相互依赖的下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14121132/