插件描述: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. js如何获取某id的子标签

    思路:根据id获取父对象,然后使用childNodes获取所有子对象数组,关键代码: document.getElementById(div_id).childNodes;   // 子对象数组 实例 ...

  2. hdu 1512 Monkey King —— 左偏树

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1512 很简单的左偏树: 但突然对 rt 的关系感到混乱,改了半天才弄对: 注意是多组数据! #includ ...

  3. localStorage 读&&写

    localStorage.setItem('edit',nowedit);  写 var nowedit1= localStorage.getItem('editdel');读

  4. 微信小程序连接Java后台

    有人问我小程序怎么连后台,这里直接贴代码 在app.js里 // api request request(url, params) { return new Promise((resolve, rej ...

  5. jQueryTools-Scrollable.js

    转载一篇例子,学习使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  6. 【BZOJ2149】拆迁队(斜率优化DP+CDQ分治)

    题目: 一个斜率优化+CDQ好题 BZOJ2149 分析: 先吐槽一下题意:保留房子反而要给赔偿金是什么鬼哦-- 第一问是一个经典问题.直接求原序列的最长上升子序列是错误的.比如\(\{1,2,2,3 ...

  7. Java内存泄漏及对象引用的4种类型

    转自: http://www.cnblogs.com/qq78292959/archive/2011/07/25/2116123.html 总结: 引用分类: 强引用,弱引用,软引用,虚引用.虚引用必 ...

  8. swift单例创建的几种方法

    //单例方法1 class SingleTonOne{ static var sharedInstanceOne:SingleTonOne{ struct SingleTonStruct { stat ...

  9. [Windows Server 2008] 查看PHP详细错误信息

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:查看IIS ...

  10. graphite 绘图工具

    graphite 绘图工具