下载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. Pwn-level2

    题目地址 https://dn.jarvisoj.com/challengefiles/level2.54931449c557d0551c4fc2a10f4778a1 先看一下文件的属性   32位 ...

  2. 期望DP的一般思路

    期望DP的一般思路 转载自_new2zy_ 期望\(dp\),也加概率\(dp\) 一般来说,期望\(dp\)找到正确的状态后,转移是比较容易想到的. 但一般情况下,状态一定是"可数&quo ...

  3. oracle存储过程中循环游标,变量的引用

    创建出错时使用: show errors查看具体的错误提示 一. 存储过程中的一个循环及变量引用示例: create or replace procedure my_proiscursor cur i ...

  4. 在线程内关闭thread handle,导致server crash

    很多年以前了,那时tester发现一个server crash,通过测试pager功能很多次,可以把server搞崩溃. 一般来说,能再现的bug都不难改,不过这次因为要跑很多次test,才能再现cr ...

  5. B1013(通过)

    这种方法是采用B1017的那个求素数的算法,并且送一个比较大的数值当作上线(20000),也可以进一步压缩,但是这个数已经够用了,就没有再试了. python方便是方便,但是真的慢 def isPri ...

  6. JSON转成List结构数据

    先要引入对应的jar,然后调用net.sf.json库的 ObjectMapper mapper = new ObjectMapper(); JavaType javaType = mapper.ge ...

  7. iOS性能优化-数组、字典便利时间复杂

    上图是几种时间复杂度的关系,性能优化一定程度上是为了降低程序执行效率减低时间复杂度. 如下是几种时间复杂度的实例: O(1) return array[index] == value; 复制代码 O( ...

  8. 5分钟上手:本地开发环境启动HTTPS

    今天我们访问的所有网站几乎都是受HTTPS保护的.如果你的站点还没有,那你应该使用它.使用HTTPS保护服务器也意味着你不能从不是HTTPS服务器向此服务器发送请求.这给使用本地开发环境的开发人员带来 ...

  9. 你不得不知的Golang线程模型 [转载]

    原著:翟陆续(加多) 资深Java , 著Java并发编程之美 一.前言 本节我们来探讨Go的线程模型,首先我们先来回顾下常见的三种线程模型,然后在介绍Go中独特的线程模型. 二.三种线程模型 线程的 ...

  10. WPF Adorner 简易图片取色器

    回答MSDN问题所写. 使用Adorner+附加属性 图片类(来自这位博主的博客) /// <summary> /// 用于获取位图像素的类 /// </summary> pu ...