三级联动

前端需要的效果,省之后市之后现,创建model,查询所有的省的信息,json传到前面,之后通过省的id找到对应的市,是用异步实现的。

# model
class Sheng(models.Model):
name = models.CharField(max_length=30) class Shi(models.Model):
name = models.CharField(max_length=30)
sheng = models.ForeignKey(Sheng) class Qu(models.Model):
name = models.CharField(max_length=30)
shi = models.ForeignKey(Shi) # 生成表并添加数据 # url中
url(r'^$',index),
url(r'area/',pro),
url(r'city(\d+)/',city),
url(r'dis(\d+)/',dis), # views
from django.http import JsonResponse
from django.shortcuts import render def index(request):
return render(request,'area.html') def pro(request):
arealist = Sheng.objects.all()
list = []
for item in arealist:
list.append({'id':item.id,'name':item.name})
print list
return JsonResponse({'data':list}) def city(request,id):
citylist = Shi.objects.filter(sheng_id=id)
list = []
for item in citylist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list}) def dis(request,id):
dislist = Qu.objects.filter(shi_id=id)
list = []
for item in dislist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list}) # html
<script src="{% static 'jquery-1.12.4.min.js' %}"></script>
<script>
$(function () {
//查询省信息
pro=$('#pro')
$.get('/area/',function (dic) {//{data:[{},{},{}]}
$.each(dic.data,function (index, item) {//
pro.append('<option value="'+item.id+'">'+item.name+'</option>')
})
}) $('#pro').change(function () {
$.get('/city'+$(this).val()+'/',function (dic) {
city = $('#city')
city.css('display','inline-block')
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.id+'">'+item.name+'</option>')
}) })
}) $('#city').change(function () {
$.get('/dis'+$(this).val()+'/',function (dic) {
dis = $('#dis')
dis.css('display','inline-block')
dis.empty().append(' <option value="">请选择区</option>')
$.each(dic.data,function (index,item) {
dis.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
}) });
</script> <select id="pro">
<option value="">请选择省</option>
</select> <select id="city" style="display:none">
<option value="">请选择市</option>
</select>
<select id="dis" style="display: none">
<option value="">请选择区</option>
</select>

Django积木块八——三级联动的更多相关文章

  1. django项目中cxselect三级联动

    下载cxselect插件放在static文件夹下 前端引入 <script src="/static/js/jQuery-1.8.2.min.js"></scri ...

  2. Django积木块六——验证用户是否登录

    验证用户是否登录 # 开始在用户登录的时候验证结束后login登录 # request.user.is_authenticated() {% if request.user.is_authentica ...

  3. Django积木块五——分页

    分页 django本身带有分页功能,为什么要用他呢?因为它的代码更为简洁,并且在做筛选的时候会把url中的所有参数都组装起来,并且加上分页.也就是做筛选中的结果也可以用这个分页. pip instal ...

  4. Django积木块三——静态文件和上传文件

    静态文件和上传的文件 # 静态文件 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) # ...

  5. Django积木块二——邮箱

    邮箱 django中自带的功能,因为登录注册都需要邮箱,因此新增了一个小的app--utils用来存放 # email_send.py import random from django.core.m ...

  6. Django积木块十——全文检索

    全文检索 全文检索效率更高,对中文可以进行分词 <!--# 1.安装包--> pip install django-haystack pip install whoosh pip inst ...

  7. Django积木块九——富文本编辑器

    富文本编辑器 前端和后端都可以用富文本编辑器 # pip install django-tinymce # setting 'tinymce' TINYMCE_DEFAULT_CONFIG = { ' ...

  8. Django积木块七——视频

    视频 # 在网上搜索video.js然后下载相关的js和css文件,看文档正确使用视频模块,添加视频外链 <div style="width: 1200px;height: 675px ...

  9. Django积木块一——验证码

    验证码 在github中搜验证码,那个有使用文档 # pip install django-simple-captcha==0.4.6 # setting app captcha # url url( ...

随机推荐

  1. linux下压力测试工具ab的使用

    一.安装 [root@node2 logs]# yum install httpd-tools 已加载插件:fastestmirror Loading mirror speeds from cache ...

  2. Pecan中api-paste.ini的解析

    在pecan中存在一个请求配置文件,定义服务启动程序app和过滤器filter,例如: [pipeline:main] pipeline = request_id sizelimit api-serv ...

  3. dotnet不是内部或外部的命令,也不是可运行的程序或批处理文件

    该问题是由于电脑环境变量配置错误所导致.最初在网上查找的方法,是在系统环境变量path中添加以下语句: %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\ ...

  4. d3.js svg中 g 标签问题一览

    svg 中的g标签, 算是比较特殊 1 没有x y属性 2 没有width height 属性 3 不能fill 4 .... g标签基本只管分组问题, 其他功能一概不提供 要解决这些问题, 直接在g ...

  5. Android Toast 工具类

    android  中常用系统吐司工具类 package cn.yhq.utils; import android.content.Context; import android.widget.Toas ...

  6. JMETER java.net.SocketTimeoutException: Read timed out

    将JMETER脚本里的请求超时时间由1000ms 修改为 10000ms,该错误不再出现.

  7. docker简单搭建gitlab

    docker启动非常简单: docker run --detach --hostname 192.168.0.33 --publish 443:443 --publish 80:80 \ --publ ...

  8. idea 用tomcat运行javaWeb

    指定tomcat在计算机的安装位置: 给项目加一个启动配置: 添加一个本地tomcat: 配置这个本地tomcat: 运行方面:

  9. Hillstone防火墙sslvpn配置与使用

    1.山石的sslvpn称为Secure Connect VPN,即scvpn. 2.WEB界面登陆防火墙,“用户”,“AAA服务器”,新建用户: 3.定义源IP池 即用户通过sslvpn拨号成功后获取 ...

  10. java8--List转为Map、分组、过滤、求和等操作----代码示例

    Java 8 函数式编程风格 Java 迄今为止最令人激动的特征.这些新的语言特征允许采用函数式风格来进行编码,我们可以用这些特性完成许多有趣的功能.这些特性如此有趣以至于被认为是不合理的.他们说会影 ...