Django 依赖下拉选择
我知道这个问题有很多答案，但我刚开始学习Django，不知道怎么实现这些解决方案。首先，我想做的事情是这样的。这是我的模型：
class Region(models.Model):
name = models.CharField(max_length=255, verbose_name=_("Name"))
slug = models.SlugField(max_length=150, unique=True, null=True)
def save(self,*args, **kwargs):
if not self.slug:
self.slug = slugify(self.name)
super(Region,self).save(*args,**kwargs)
def __unicode__(self):
return u'%s' % (self.name)
class Meta:
verbose_name = _('Region')
verbose_name_plural = _('Regions')
class District(models.Model):
name = models.CharField(max_length=255, verbose_name=_("Name"))
slug = models.SlugField(max_length=150, unique=True, null=True)
region = models.ForeignKey(Region,verbose_name=_("Region"))
def save(self, *args, **kwargs):
if not self.slug:
self.slug = slugify(self.name)
super(District, self).save(*args, **kwargs)
def is_in_region(self, region):
if self.region == region:
return True
else:
return False
def __unicode__(self):
return u'%s' % (self.name)
class Meta:
verbose_name = _("District")
verbose_name_plural = _("Districts")
在前端页面，我想选择一个地区，然后根据选择的地区显示该地区的区。这是我的视图：
class SearchView(ListView):
template_name = 'advert/list_view.html'
def all_json_models(self, request, region):
current_reg = Region.objects.get(slug=region)
districts = District.objects.all().filter(region=current_reg)
json_models = serializers.serialize("json", districts)
return http.HttpResponse(json_models, mimetype="application/javascript")
def get(self, request, *args, **kwargs):
return self.post(request, *args, **kwargs)
def post(self, request, *args, **kwargs):
self.request = request
try:
self.page = int(self.request.GET.get('page','1'))
except:
self.page = 1
self.queryset = ""
return super(SearchView, self).get(request, *args, **kwargs)
def get_queryset(self):
"""We have to bypass the queryset because
we are joining several object lists together. """
return None
def get_context_data(self, **kwargs):
context['regions'] = Region.objects.all().order_by("name")
return context
get_context_data这个方法其实很长，但我这里只写了一个简单的版本。我参考了这个网站的解决方案 http://www.devinterface.com/blog/en/2011/02/how-to-implement-two-dropdowns-dependent-on-each-other-using-django-and-jquery/ 。但是，选择区的功能还是没有正常工作。我尝试在视图类中写一个叫做all_json_models的方法，但这个方法还是没有被调用。有没有人能告诉我这是为什么吗？非常感谢！
4 个回答
0
这里有一个更新的关于AJAX代码的回答，还有一些补充说明。你只需要把#selectyear改成你选择框的ID，然后把变量schedule_year改成一个更符合你数据的名字。接着在成功的回调中，把#selectschedule改成你的第二个选择框的ID。注意，result[i].schedule_name是从视图中返回的值的名字。查看views.py中的result_set，根据你的数据相应地修改名字。
如果你想实现超过两个联动选择框，其实很简单。只需复制下面的代码，把每个选择框的代码串联起来，直到满足你的需求。可以重复使用同一个视图，配合条件语句，或者再添加一个视图来返回新的结果。
javascript和AJAX
<script>
$(document).ready(function(){
//handle selected year
$('select#selectyear').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var schedule_year = optionSelected.text();
$.ajax({
url: 'getdetails/',
type: 'GET',
data: {'year' : JSON.stringify(schedule_year)},
success: function(result){
//remove previous selections
$("#selectschedule option").remove();
//add a blank option
$("#selectschedule").append('<option></option>');
//append new options returned
for (var i = result.length - 1; i >= 0; i--) {
$("#selectschedule").append('<option>'+ result[i].schedule_name +'</option>');
};
},
});
});
});
</script>
HTML
<table width="100%" class="table">
<tr>
<td class="align-middle" style="width: 50%;">
<label for="#selectyear" value="calendar_year" style="width:100%">
<span class="small pl-1">Select Calendar Year</span>
<select class="form-control" name="selectyear" id="selectyear">
<option value="blank"></option>
{% for schedule in schedules|dictsort:'fee_schedule_calendar_year' %}
{% ifchanged %}<!--used to only show unique values-->
<option value="{{ schedule.fee_schedule_calendar_year }}">{{ schedule.fee_schedule_calendar_year }}</option>
{% endifchanged %}
{% endfor %}
</select>
</label>
</td>
<td class="align-middle" style="width: 50%;">
<label for="#selectschedule" value="fee_schedule" style="width: 100%;">
<span class="small pl-1">Select Fee Schedule</span>
<select class="form-control" name="selectschedule" id="selectschedule"></select>
</label>
</td>
</tr>
</table>
Views.py
# Handle AJAX request for fee schedule calendar year select
def getdetails(request, file_upload_id, file_header_id):
schedule_year = json.loads(request.GET.get('year'))
result_set = []
schedules = FeeSchedule.objects.filter(fee_schedule_calendar_year=schedule_year)
for schedule in schedules:
result_set.append({'schedule_name': schedule.fee_schedule_name})
return HttpResponse(json.dumps(result_set, indent=4, sort_keys=True, default=str), content_type='application/json')
urls.py
path('whatever_your_current_path_is_for_this_view/getdetails/', login_required(views.getdetails), name='get_details'),
1
我对那些不够简洁的解决方案感到厌烦，所以我写了一个可能适合大多数情况的灵活工具：
现在这个工具只支持在线/AJAX相关的选择框。我计划在不久的将来（可能是这周或下周）增加一个离线模式，这个模式会在小部件中加入一些渲染好的JavaScript代码，用来跟踪父选择框的变化，并通过一个值到选项列表的映射，把这些变化传递给子选择框。AJAX解决方案非常适合像汽车品牌/型号这种有成千上万选项的情况，而离线解决方案则更适合产品/颜色这种可能只有几十个选项的情况。
2
你可以使用Jquery的一个插件，叫做chained。
示例链接： http://codepen.io/anon/pen/EapNPo?editors=101
HTML部分
<select id="id_country" name="country">
<option value="" selected="selected">---------</option>
<option value="1">Colombia</option>
<option value="2">Rusia</option>
</select>
<select id="id_city" name="city">
<option value="" selected="selected">---------</option>
<option value="1" class="1">Bogotá</option>
<option value="2" class="2">Moscú</option>
<option value="3" class="2">San Petersburgo</option>
<option value="4" class="1">Valledupar</option>
</select>
JavaScript部分
$("#id_city").chained("#id_country");
这个插件可以用来生成带有模型的表单（外键）。
想要了解更多，可以去看这个完整的教程： https://axiacore.com/blog/django-y-selects-encadenados/
28
好吧，我为你写了一个完整的项目，希望这能帮到你 :) :
在这个项目中，我们有一些国家，每个国家都有很多城市。
如图所示，每当你选择一个国家时，下面的下拉框只会显示与该国家相关的城市 :)
好了，现在我们来看代码吧。
（完整的项目源代码在我的 github 上 : https://github.com/nodet07/Django-Related-DropDowns）
models.py :
只有两个简单的模型，一个国家可以有很多城市！
from django.db import models
class City(models.Model):
name = models.CharField(max_length=50)
country = models.ForeignKey("Country")
def __unicode__(self):
return u'%s' % (self.name)
class Country(models.Model):
name = models.CharField(max_length=50)
def __unicode__(self):
return u'%s' % (self.name)
views.py:
from django.shortcuts import render
from map.models import *
from django.utils import simplejson
from django.http import HttpResponse
def index(request):
countries = Country.objects.all()
print countries
return render(request, 'index.html', {'countries': countries})
def getdetails(request):
#country_name = request.POST['country_name']
country_name = request.GET['cnt']
print "ajax country_name ", country_name
result_set = []
all_cities = []
answer = str(country_name[1:-1])
selected_country = Country.objects.get(name=answer)
print "selected country name ", selected_country
all_cities = selected_country.city_set.all()
for city in all_cities:
print "city name", city.name
result_set.append({'name': city.name})
return HttpResponse(simplejson.dumps(result_set), mimetype='application/json', content_type='application/json')
index.html :
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
<script>
$(document).ready(function(){
$('select#selectcountries').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var country_name = optionSelected.text();
data = {'cnt' : country_name };
ajax('/getdetails',data,function(result){
console.log(result);
$("#selectcities option").remove();
for (var i = result.length - 1; i >= 0; i--) {
$("#selectcities").append('<option>'+ result[i].name +'</option>');
};
});
});
});
</script>
</head>
<body>
<select name="selectcountries" id="selectcountries">
{% for item in countries %}
<option val="{{ item.name }}"> {{ item.name }} </option>
{% endfor %}
</select>
<select name ="selectcities" id="selectcities">
</select>
</body>
</html>