Django模板实现地址的省市县三级联动

本次实现的是省市县的三级联动问题。首先需要一张数据表：

class Area(models.Model):
    atitle = models.CharField(max_length=30)
    aparent = models.ForeignKey("self", null=True, blank=True, on_delete=models.CASCADE)

    def __str__(self):
        return self.atitle

我写的是一张自关联的省市县表，只有两个字段 atitle（名称）、aparent（自身对象关联），当然在生成数据表的时候还会自动生成一个主键且自增的id字段。生成数据表之后要记得把全国省市县的数据插入进去，这里我就不展示，总共大概3500多条数据。

然后就在模板中将省市县的下拉列表写出来：

    

        

            
店铺地址：
            

                
                    请选择省份
                --
                
                     请选择城市
                --
                
                     请选择区/县
                
            
        
        

            

            

        
        

            

                
            
        
    

 为了前端显示的好看，本人使用form表单加表格的方式，form表单便于提交数据到后台。由于这个省市县三级联动是动态显示的，本人使用ajax实现动态显示，所以在之前就要先导入jQuery和vue，这里就不展示了。

接下来就是写后台视图函数来接收ajax请求并返回所需要的数据

# 获取省份信息
def getProvince(request):
    # 获取所有省份
    provinces = Area.objects.filter(aparent__isnull=True)
    res = []
    for i in provinces:
        res.append([i.id, i.atitle])
    return JsonResponse({"provinces":res})
# 获取市信息
def getCity(request):
    city_id = request.GET.get('city_id')
    # 获取当前省的所有市
    cities = Area.objects.filter(aparent_id=city_id)
    res = []
    for i in cities:
        res.append([i.id, i.atitle])
    return JsonResponse({"cities":res})
# 获取县信息
def getDistrict(request):
    district_id = request.GET.get('district_id')
    # 获取当前市的所有县
    cities = Area.objects.filter(aparent_id=district_id)
    res = []
    for i in cities:
        res.append([i.id, i.atitle])
    return JsonResponse({'district': res})

 接着是设置路由来供ajax使用

path('getProvince/', views.getProvince),
path('getCity/', views.getCity),
path('getDistrict/', views.getDistrict),

接下来就是编写js代码实现ajax效果 

$.get("/getProvince/", function (data) {
    for(var i = 0; i < data.provinces.length; i++){
        # 循环遍历接收的含有所有省的列表
        $new = $(""+data.provinces[i][1]+"");
        # 将该省份添加到前端的下拉列表中
        $("#province").append($new);
    }
});
# 由于要实现联动效果，所以当选择的省份发生改变，要将之前选择的市、县的下拉列表全部清空，再重新添加
$("#province").change(function () {
    $("#city").empty().append('请选择城市');
    $("#district").empty().append('请选择区/县');
    $.ajax({
        url: "/getCity/",
        type:'get',
        data:{
            "city_id":$(this).val()
        }
    }).done(function (data) {
        # 将选择的当前省份的所有市循环添加到下拉列表中
        for(var i = 0;i < data.cities.length; i++){
            $new = $(""+data.cities[i][1]+"");
            $("#city").append($new);
        }
    });
});
$("#city").change(function () {
    # 同理，当选择的市发生改变时，清空之前选择的县
    $("#district").empty().append('请选择区/县');
    $.ajax({
        url:'/getDistrict/',
        type:'get',
        data:{
            "district_id":$(this).val()
        }
    }).done(function (data) {
        # 重新循环添加当前市的所有县
        for(var i = 0;i < data.district.length; i++){
            $new = $(""+data.district[i][1]+"");
            $("#district").append($new);
        }
    });
});

 这样的话，一个省市县三级联动的功能就做好了。