三级联动
前端需要的效果，省之后市之后现，创建model，查询所有的省的信息，json传到前面，之后通过省的id找到对应的市，是用异步实现的。
# model
class Sheng(models.Model):
name = models.CharField(max_length=30)
class Shi(models.Model):
name = models.CharField(max_length=30)
sheng = models.ForeignKey(Sheng)
class Qu(models.Model):
name = models.CharField(max_length=30)
shi = models.ForeignKey(Shi)
# 生成表并添加数据
# url中
url(r'^$',index),
url(r'area/',pro),
url(r'city(\d+)/',city),
url(r'dis(\d+)/',dis),
# views
from django.http import JsonResponse
from django.shortcuts import render
def index(request):
return render(request,'area.html')
def pro(request):
arealist = Sheng.objects.all()
list = []
for item in arealist:
list.append({'id':item.id,'name':item.name})
print list
return JsonResponse({'data':list})
def city(request,id):
citylist = Shi.objects.filter(sheng_id=id)
list = []
for item in citylist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list})
def dis(request,id):
dislist = Qu.objects.filter(shi_id=id)
list = []
for item in dislist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list})
# html
<script src="{% static 'jquery-1.12.4.min.js' %}"></script>
<script>
$(function () {
//查询省信息
pro=$('#pro')
$.get('/area/',function (dic) {//{data:[{},{},{}]}
$.each(dic.data,function (index, item) {//
pro.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
$('#pro').change(function () {
$.get('/city'+$(this).val()+'/',function (dic) {
city = $('#city')
city.css('display','inline-block')
city.empty().append('<option value="">请选择市</option>')
dis = $('#dis')
dis.empty().append(' <option value="">请选择区</option>')
$.each(dic.data,function (index,item) {
city.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
})
$('#city').change(function () {
$.get('/dis'+$(this).val()+'/',function (dic) {
dis = $('#dis')
dis.css('display','inline-block')
dis.empty().append(' <option value="">请选择区</option>')
$.each(dic.data,function (index,item) {
dis.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
})
});
</script>
<select id="pro">
<option value="">请选择省</option>
</select>
<select id="city" style="display:none">
<option value="">请选择市</option>
</select>
<select id="dis" style="display: none">
<option value="">请选择区</option>
</select>
