Django写省市级

模型类

 # 定义地区模型
 class AreaInfo(models.Model):
 
     # 地区名字
     title = models.CharField(max_length=20)
 
     # 上级地区
     # 关联自己记住这里写self
     # null：如果为True，Django将空值以NULL存储到数据库中，默认值是False
     # blank：如果为True，则该字段允许为空白，默认值是False
     # 把这个设置成外件是不要加_id， 你也可以写成(parea_id)
     parea= models.ForeignKey("self",null=True,blank=True)

路由设置

 url(r'^area/$', views.area)
 url(r'^area2_(\d+)/$', views.area2)

视图函数

 #获取省信息
 def area(request):
     # 这是查询所有的省信息  filter返回对象集 values返回的是字典对象
     # __isnull判断是否为空
     list = AreaInfo.objects.filter(aParent__isnull=True)
     list2 = []
     for item in list:
         list2.append([item.id, item.atitle])
     # 专门返回json对象
     return JsonResponse({'data': list2})




 #根据pid查询子级区域信息
 def area2(request, pid):
     list = AreaInfo.objects.filter(aParent_id=pid)
     list2 = []
     for item in list:
         list2.append([item.id, item.atitle])
     return JsonResponse({'data': list2})

模板

  <html>
  <head>
     <title>省市区列表</title>
     <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
     <script type="text/javascript">
         $(function(){
             //页面加载完成后获取省信息，并添加到省select
             $.get('/area/',function(dic) {
                 pro=$('#pro')
                 $.each(dic.data,function(index,item){
                     pro.append('<option value='+item[0]+'>'+item[1]+'</option>');
                 })
             });
             //为省select绑定change事件，获取市信息，并添加到市select
             $('#pro').change(function(){
                 $.get('/area2_'+$(this).val()+'/',function(dic){
                     city=$('#city');
                     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[0]+'>'+item[1]+'</option>');
                     })
                 });
             });
             //为市select绑定change事件，获取区县信息，并添加到区县select
             $('#city').change(function(){
                 $.get('/area2_'+$(this).val()+'/',function(dic){
                     dis=$('#dis');
                     dis.empty().append('<option value="">请选择区县</option>');
                     $.each(dic.data,function(index,item){
                         dis.append('<option value='+item[0]+'>'+item[1]+'</option>');
                     })
                 })
             });
 
         });
     </script>
 </head>
 <body>
 <select id="pro">
     <option value="">请选择省</option>
 </select>
 <select id="city">
     <option value="">请选择市</option>
 </select>
 <select id="dis">
     <option value="">请选择区县</option>
 </select>
 </body>
 </html>

猜你喜欢