Django实现 省 市 县 自关联的下拉级联
前端部分： 三个下拉拉菜单进行级联
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' # 指定表名称
