url配置
urlpatterns=[
url(r'^$',views.index),
url(r'^pro/$',views.pro),
url(r'^city(\d+)/$',views.city)
]
模型
from django.db import models
class AreaInfo(models.Model):
title=models.CharField(max_length=20)
parea=models.ForeignKey('self',null=True,blank=True)
定义视图
from django.shortcuts import render
from django.http import JsonResponse
from models import *
def index(request):
return render(request,'booktest/index.html')
def pro(request):
prolist=AreaInfo.objects.filter(parea__isnull=True)
list=[]
for item in prolist:
list.append([item.id,item.title])
return JsonResponse({'data':list})
def city(request,id):
citylist=AreaInfo.objects.filter(parea_id=id)
list=[]
for item in citylist:
# [{}, {}, {}...]
list.append({'id':item.id,'title':item.title})
return JsonResponse({'data':list})
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/booktest/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//使用ajax加载省的信息
$.get('/pro/',function(list){
pro=$('#pro');
$.each(list.data,function(index,item){
pro.append('<option value='+item[0]+'>'+item[1]+'</option>')
})
});
//查询市的信息
$('#pro').change(function(){
//area140000/
city=$('#city');
city.empty().append('<option value="0">请选择市</option>');
$('#dis').empty().append('<option value="0">请选择区</option>');
$.get('/city'+$(this).val()+'/',function (list) {
//{'data':[{},{}...]}
$.each(list.data,function(index,item){
//{'id':1,'title':北京}
city.append('<option value="'+item.id+'">'+item.title+'</option>')
})
})
});
//查询区县的信息
$('#city').change(function(){
$.get('/city'+$(this).val()+'/',function(list){
dis=$('#dis').empty().append('<option value="0">请选择区</option>')
$.each(list.data,function(index,item){
dis.append('<option value="'+item.id+'">'+item.title+'</option>')
})
})
})
})
</script>
</head>
<body>
<select name="" id="pro">
<option value="0">请选择省</option>
</select>
<select name="" id="city">
<option value="0">请选择市</option>
</select>
<select name="" id="dis">
<option value="0">请选择区</option>
</select>
</body>
</html>
结果
