前端部分： 三个下拉拉菜单进行级联

 <body>

 <select id="province" >

     <option value="">请选择省份</option>

 </select>

 <select id="city">

     <option value="">请选择城市</option>

 </select>

 <select id="district">

     <option value="">请选择区/县</option>

 </select>

 </body>

利用ajax进行get请求：

当改变省份的时候，将市和县的信息清空（可能会上一次选择省份再次选择省份会市后面数据多余），再利用ajax提交get获取当前省份下的城市，放入city中

当改变城市的时候，将县的信息清空（多次选择会产生数据多余），再利用ajax提交get获取当前城市下的所有区县放入district中

 $(function(){

 // 获取省份

 $.get('/getProvince/',function(data){

 for(var i = 0,len = data.provinces.length; i<len ;i++){

     $new = $("<option value="+data.provinces[i][0] +">"+  data.provinces[i][1]  +"</option>" );

     $("#province").append( $new );

 }

 });

 //改变省份后

 $("#province").change(function(){

 //清空市和区

 $("#city").empty().append('<option value="">请选择城市</option>');

 $("#district").empty().append('<option value="">请选择区/县</option>');

 $.ajax({

     url:'/getCity/',

     type:'get',

     data:{"city_id":$(this).val()}

 }).done(function(data){

     for(var i = 0,len = data.cities.length; i<len ;i++){

         $new = $( "<option value="+data.cities[i][0] +">"+  data.cities[i][1]  +"</option>" );

         $("#city").append( $new );

     }

 });

 });

 //改变城市后

 $("#city").change(function(){

 //清空市和区

 $("#district").empty().append('<option value="">请选择区/县</option>');

 $.ajax({

     url:'/getDistrict/',

     type:'get',

     data:{"district_id":$(this).val()}

 }).done(function(data){

     for(var i = 0,len = data.district.length; i<len ;i++){

         $new = $( "<option value="+data.district[i][0] +">"+  data.district[i][1]  +"</option>" );

         $("#district").append($new );

     }

 });

 });

 })

后端部分：

views视图：

 # 级联菜单

 def getAreas(request):

     return render(request,'booktest/getAreas.html')

 #获得省份

 def getProvince(request):

     provinces = AreaInfo.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 = AreaInfo.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 = AreaInfo.objects.filter(aParent_id=district_id)

     res = []

     for i in cities:

         res.append([i.id, i.atitle])

     return JsonResponse({'district': res})

模型部分：

 # 建立城市自关联数据库表

 class AreaInfo(models.Model):

     atitle = models.CharField(max_length=30)

     aParent = models.ForeignKey('self',null=True,blank=True)

     def __str__(self):

         return self.atitle

     class Meta:

         db_table = 'areas'  # 指定表名称

Django实现 省 市 县 自关联的下拉级联的更多相关文章

  1. Django分析之三级下拉菜单选择省/市/县

    今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先 ...

  2. 【Python】django模型models的外键关联使用

    Python 2.7.10,django 1.8.6 外键关联:http://www.bubuko.com/infodetail-618303.html 字段属性:http://www.cnblogs ...

  3. 使用combobox下拉列表框实现省 市 县 的三级联动

    package com.hanqi.entity; //地区 public class Region { //地区id private String regionID; //地区名称 private ...

  4. Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索

    Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...

  5. [Django]下拉表单与模型查询

    前言:本文主要针对自定义下拉表单制作,下拉表单的内容是取至于数据库,即动态实现下拉表单 正文: 动态实现下拉表单有两种方法: 一.自己手动写 html 模板中的 <form ...> &l ...

  6. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  7. django 下拉菜单显示为object的解决办法

    在创建完Django数据库结构之后,使用Django自带的强大的admin功能往数据库中添加数据,图形化界面如下: 但时候有下拉框选项(只要在model中有定义Charfield就会显示为下拉框),如 ...

  8. Django forms表单 select下拉框的传值

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...

  9. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. 第一周Python讲课内容--日记

    1.python的发展史,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年...... 2.第一个helloword程序的开始 3.变量的含义,赋值传参数的作 ...

  2. ASP.NET MVC上传图片的奇怪问题

    本文来源于博客园-钱智慧,转载请注明出处 表现:客户说就华为的手机有问题,而且是在QQ里打开有问题,如果在手机的浏览器上,则可以正常上传图片. 有问题的代码如下: private ResultMode ...

  3. C语言第十次博客作业--结构体

    一.PTA实验作业 题目1: 结构体数组按总分排序 1. 本题PTA提交列表 2. 设计思路 求出每名学生的总分 定义i,j循环变量 for i=0 to n for j=0 to 3 p[i].su ...

  4. Django+xadmin打造在线教育平台（四）

    七.授课机构功能 7.1.模板继承 (1)创建母板 把org-list.html拷贝到templates目录下,新建base.html,剪切org-list.html内容到里面 再修改一下静态文件的地 ...

  5. Mycat 分片规则详解--日期（天）分片

    实现方式:按照日期来分片 优点:使数据按照日期来进行分时存储 缺点:由于数据是连续的,所以该方案不能有效的利用资源 配置示例: <tableRule name="sharding-by ...

  6. python基础学习笔记一

    1.变量 为了节省内存,python解释器会对一些简单的字符串以及小整型数,做出一些优化,当要定义的新变量的内容与定义过的内容相同时,会让两者使用同一个内存空间. 例如: 在这个例子里面,'old'是 ...

  7. 【Python】 list & dict & str

    list & dict & str 这三种类型是python中最常用的几种数据类型.他们都是序列的一种 ■ 序列通用操作 1. 分片   s[a:b] 返回序列s中从s[a]到s[b- ...

  8. CAS 之 Https And Database Authentication（三）

    CAS 之 Https And Database Authentication(三) 标签(空格分隔): CAS sso-examples-guides源码 Intro(介绍) 由上节可知Apereo ...

  9. Lucene详解

    一.lucene原理 Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎.它不是一个完整的搜索应用程序 ...

  10. linux小白成长之路4————centos7配置自动更新安装安全补丁

    [内容指引] 安装yum-cron; 修改配置:nano: 手工启动服务: 将服务设置为开机自动启动. 为保证linux系统的安全性以及稳定性,可以使用yum-cron服务自动更新: 1.安装yum- ...