插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单,简单设置即可完成中国省市区地址联动效果。

【官网】https://fengyuanchen.github.io/distpicker/

【CDN地址】http://www.bootcdn.cn/distpicker/

【源代码】https://github.com/fengyuanchen/distpicker

安装可使用CDN方法

使用插件需要同时引用 jQuery和 Distpicker插件

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/distpicker/2.0.3/distpicker.js"></script>

使用方法

data-toggle="distpicker"用来初始化插件
data-province
data-city
data-district
用来自定义占位符

基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。

 <div data-toggle="distpicker"><!-- container -->
<select></select><!-- 省 -->
<select></select><!-- 市 -->
<select></select><!-- 区 -->
</div>

默认初始化显示占位符也可以自定义省市区。

 <div data-toggle="distpicker">
<select data-province="浙江省"></select>
<select data-city="杭州市"></select>
<select data-district="西湖区"></select>
</div>

中国省市区地址三级联动插件---jQuery Distpicker的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  3. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  4. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  5. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  6. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  7. 省市区三级联动[JSON+Jquery]

    <!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...

  8. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  9. 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

随机推荐

  1. El Dorado(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=2372 题意:给出n个数,求长度为m的递增子序列的数目. 思路:状态转移方程 dp[i][j] = sum(dp[ ...

  2. js模拟复制

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了.   一.实现点击按钮,复制文本框中的的内 ...

  3. codevs1040统计单词个数(区间+划分型dp)

    1040 统计单词个数 2001年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 给出一个长度不超 ...

  4. [Apple开发者帐户帮助]九、参考(4)支持的功能(macOS)

    macOS应用程序可用的功能取决于您的程序成员身份和签名证书. 能力 ADP 开发者ID Apple开发者 应用程序组 App沙盒 游戏中心     硬化运行时 iCloud:CloudKit   i ...

  5. selenium3 + python - 异常处理截图 screenshot

    一.截图方法 1.get_screenshot_as_file(self, filename) --这个方法是获取当前window的截图,出现IOError时候返回False,截图成功返回True. ...

  6. Java使用Cipher类实现加密,包括DES,DES3,AES和RSA加密

    一.先看一个简单加密,解密实现 1.1 加密 /** * content: 加密内容 * slatKey: 加密的盐,16位字符串 * vectorKey: 加密的向量,16位字符串 */ publi ...

  7. cookie和seesion区别

    cookie 和session 的区别详解 这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie ...

  8. 解决macOS升级之后每次使用ssh都要输入密码的问题

      最近想趁着假期把跟了我2年mac的系统重做下.于是就开始行动了,经过大半天的数据备份.然后进行了全盘格式化,使用了在线更新的方式从新安装升级到了10.12.6.这里提醒下有类似的想法的同学可以采用 ...

  9. c++ pow函数

    函数名称:   pow 函数原型:   double pow( double x, double y ); 函数功能:   计算x的y次幂 例:z=pow(x,y);    x=9,y=8  z就是9 ...

  10. Aspose Cells dll 实现数据简单下载

    Workbook workbook = new Workbook(); //工作簿                     Worksheet sheet = workbook.Worksheets[ ...