下载cxselect插件放在static文件夹下

前端引入

<script src="/static/js/jQuery-1.8.2.min.js"></script>
<script src="/static/cxSelect/jquery.cxselect.min.js"></script>

前端html样式

{#    给三级联动设置简样式#}
<style>
.wrap{width:600px;margin:0 auto;padding: 0 40px 20px;border:2px solid #999;}
fieldset{margin: 10px 0;}
a{color:#06f;text-decoration:none;}
</style>

前端页面

<div class="wrap">
<!--2:写html-->
<fieldset id="city_china">
<legend>默认</legend>
<p>省份:<select class="province" name="province" data-value="" data-first-title="选择省份" disabled="disabled"></select></p>
<p>城市:<select class="city" name="city" data-value="" data-first-title="选择市" disabled="disabled"></select></p>
<p>地区:<select class="area" name="area" data-value="" data-first-title="选择地区" disabled="disabled"></select></p>
</fieldset> <fieldset id="city_china_val">
<legend>设置默认值及选项标题</legend>
<p>所在地区:
<select class="province" name="province" data-value="河南省" data-first-title="选择省" disabled="disabled"></select>
<select class="city" name="city" data-value="郑州市" data-first-title="选择市" disabled="disabled"></select>
<select class="area" name="area" data-value="中原区" data-first-title="选择地区" disabled="disabled"></select>
</p>
</fieldset> <fieldset id="global_location">
<legend>全球主要国家城市联动</legend>
<p>所在地区:
<select class="country" data-first-title="选择国家" disabled="disabled"></select>
<select class="state" data-value="" disabled="disabled"></select>
<select class="city" data-value="" disabled="disabled"></select>
<select class="region" data-value="" disabled="disabled"></select>
</p>
</fieldset> </div>

js

{#三级联动#}
<script> });
//3:写js
$('#city_china').cxSelect({
url : '/static/cxSelect/cityData.min.json', //联动json数据
selects: ['province', 'city', 'area'] //select框对应class
// nodata: 'none' //无子类别时不显示下拉框
}); $('#city_china_val').cxSelect({
url : '/static/cxSelect/cityData.min.json', //联动json数据
selects: ['province', 'city', 'area'] //select框对应class
// nodata: 'none' //无子类别时不显示下拉框
}); $('#global_location').cxSelect({
url: '/static/cxSelect/globalData.min.json', //联动json数据
selects: ['country', 'state', 'city', 'region'],//select框对应class
nodata: 'none' //无子类别时不显示下拉框
}); </script>

页面效果

django项目中cxselect三级联动的更多相关文章

  1. [翻译]在Django项目中添加谷歌统计(Google Analytics)

    原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...

  2. Django项目中使用Redis

    Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...

  3. 擦他丫的,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了!

    擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...

  4. django 项目中使用多数据库 multiple databases

    假如在一个django项目中使用到了不只一个数据库, 其实这在大一点的工程中很常见,比如主从库 那么会涉及到如下一些东西 1, 定义 在settings中的DATABASE中定义会使用到的数据,比如除 ...

  5. django 项目中的 favicon.ico 处理

    django 项目中的 favicon.ico 处理  (django == 2.0.6) 1. 引入模块: from django.views.generic.base import Redirec ...

  6. Django项目中模板标签及模板的继承与引用【网站中快速布置广告】

    Django项目中模板标签及模板的继承与引用 常见模板标签 {% static %} {% for x in range(x) %}{% endfor %} 循环的序号{% forloop %} 循环 ...

  7. Django项目中"expected str, bytes or os.PathLike object, not list"错误解决:

    对于这个错误,也在于自己对django基础的掌握不是很牢固,忽略了MEDIA_ROOT的类型是string,而不是list. 错误的写法: MEDIA_ROOT = [ os.path.join(BA ...

  8. django项目中遇到要实现定时任务

    django项目中遇到要实现定时任务,所以选用了简单易用的django-crontab插件. 1.安装 django-crontab pip install django-crontab 2.定时要执 ...

  9. 【技术博客】JWT的认证机制Django项目中应用

    开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了.我们认为这样的经验是有必要记录下来的,因此就有了[技术博客]. JWT的认证机制Django项目中应用 这篇技术博客基于软 ...

随机推荐

  1. ubuntu16.04matlab中文注释乱码的解决办法

    中文注释乱码的原因是windows下的m文件采用的是gb2312编码,只要将所有的m文件转成 utf8文件,显示就正常了. 1.首先安装enca:sudo apt-get install enca 2 ...

  2. 工具资源系列之 github 上各式各样的小徽章从何而来?

    前言 平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢? 首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们 ...

  3. UTC和GMT什么关系?moment处理世界时问题

    UTC和GMT什么关系? 个人理解,两者基本一样,要说区别,那就是UTC更准确,而GMT误差有点.由于历史原因,以前用GMT,后来发现有些误差,改用UTC 我们可以看到,JS的 Date() 用的是G ...

  4. 如何运用C语言求(判断)素数。

    int i,n; scanf("%d",&n); i=2;   //这一步是亮点!! while(i<n) { if(n%i==0) break; i++; } if ...

  5. pycharm配置docker

  6. github上计算String相似度好的项目

    项目中包含了杰卡德NGram.cosin夹角.最长公共子序列.边际距离等常用的相似度算法. https://github.com/tdebatty/java-string-similarity

  7. 实现ElementUI Dialog宽度响应式变化

    在ElementUI的Dialog中,需要实现其宽度随浏览器宽度变化而变化,并设定默认值,当浏览器宽度大于该值时,Dialog保持该宽度,小于该值时,使用100%宽度. 代码使用 window.onr ...

  8. Python连载36-线程数量限制、Timer、可重入锁

    一.允许一个资源最多由几个线程同时进行 命令行:threading.Semaphore(个数) 代表现在最多有几个线程可以进行操作 import threading import time #参数定义 ...

  9. Gin框架 - 数据绑定和验证

    概述 上篇文章分享了 Gin 框架使用 Logrus 进行日志记录,这篇文章分享 Gin 框架的数据绑定与验证. 有读者咨询我一个问题,如何让框架的运行日志不输出控制台? 解决方案: engine : ...

  10. Tomcat put上传漏洞_CVE2017-12615( JSP Upload Bypass/Remote Code Execution)

    CVE2017-12615漏洞复现( tomcat JSP Upload Bypass /Remote Code Execution) 一.漏洞原理 在windows服务器下,将readonly参数设 ...