前端部分： 三个下拉拉菜单进行级联
1 <body>
2 <select id="province" >
3 <option value="">请选择省份</option>
4 </select>
5 <select id="city">
6 <option value="">请选择城市</option>
7 </select>
8 <select id="district">
9 <option value="">请选择区/县</option>
10 </select>
11 </body>
利用ajax进行get请求：
当改变省份的时候，将市和县的信息清空（可能会上一次选择省份再次选择省份会市后面数据多余），再利用ajax提交get获取当前省份下的城市，放入city中
当改变城市的时候，将县的信息清空（多次选择会产生数据多余），再利用ajax提交get获取当前城市下的所有区县放入district中
1 $(function(){ 2
3 // 获取省份
4 $.get('/getProvince/',function(data){ 5 for(var i = 0,len = data.provinces.length; i<len ;i++){ 6 $new = $("<option value="+data.provinces[i][0] +">"+ data.provinces[i][1] +"</option>" ); 7 $("#province").append( $new ); 8 } 9
10 }); 11
12
13 //改变省份后
14 $("#province").change(function(){ 15 //清空市和区
16 $("#city").empty().append('<option value="">请选择城市</option>'); 17 $("#district").empty().append('<option value="">请选择区/县</option>'); 18 $.ajax({ 19 url:'/getCity/', 20 type:'get', 21
22 data:{"city_id":$(this).val()} 23 }).done(function(data){ 24 for(var i = 0,len = data.cities.length; i<len ;i++){ 25 $new = $( "<option value="+data.cities[i][0] +">"+ data.cities[i][1] +"</option>" ); 26 $("#city").append( $new ); 27 } 28 }); 29 }); 30
31 //改变城市后
32 $("#city").change(function(){ 33 //清空市和区
34 $("#district").empty().append('<option value="">请选择区/县</option>'); 35 $.ajax({ 36 url:'/getDistrict/', 37 type:'get', 38 data:{"district_id":$(this).val()} 39 }).done(function(data){ 40 for(var i = 0,len = data.district.length; i<len ;i++){ 41 $new = $( "<option value="+data.district[i][0] +">"+ data.district[i][1] +"</option>" ); 42 $("#district").append($new ); 43 } 44 }); 45 }); 46
47 })
后端部分：
views视图：
1 # 级联菜单
2 def getAreas(request): 3 return render(request,'booktest/getAreas.html') 4
5 #获得省份
6 def getProvince(request): 7 provinces = AreaInfo.objects.filter(aParent__isnull = True) 8 res = [] 9 for i in provinces: 10 res.append( [i.id , i.atitle] ) 11 return JsonResponse({'provinces':res}) 12
13 #获得城市
14 def getCity(request): 15 city_id = request.GET.get('city_id') 16 cities = AreaInfo.objects.filter(aParent_id=city_id) 17 res = [] 18 for i in cities: 19 res.append([i.id, i.atitle]) 20 return JsonResponse({'cities':res}) 21
22 #获得区 县
23 def getDistrict(request): 24 district_id = request.GET.get('district_id') 25 cities = AreaInfo.objects.filter(aParent_id=district_id) 26 res = [] 27 for i in cities: 28 res.append([i.id, i.atitle]) 29 return JsonResponse({'district': res})
模型部分：
1 # 建立城市自关联数据库表
2 class AreaInfo(models.Model): 3 atitle = models.CharField(max_length=30) 4 aParent = models.ForeignKey('self',null=True,blank=True) 5
6 def __str__(self): 7 return self.atitle 8
9 class Meta: 10 db_table = 'areas' # 指定表名称