插件描述: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. poj2115 C Looooops——扩展欧几里得

    题目:http://poj.org/problem?id=2115 就是扩展欧几里得呗: 然而忘记除公约数... 代码如下: #include<iostream> #include< ...

  2. Access restriction:The type JPEGCodec is not accessible due to restriction on required library C:\Program Files\Java\jre6\lib\rt.jar 报错

    报错: Access restriction:The type JPEGCodec is not accessible due to restriction on required library C ...

  3. 0619-dedeCMS的安装、重装、目录说明、基本操作及注意事项

    一.安装步骤: 1.解压文件,将我们需要的uploads文件夹更名为dedeCMS 2.从站点下打开dedeCMS-install-index.php开始安装 3.安装完成后到php.ini中设置re ...

  4. [App Store Connect帮助]三、管理 App 和版本(2.7)输入 App 信息:添加 iMessage 信息版 App 的 App 信息

    您可以使用 Messages framework(Messages 框架)来创建贴纸包或 iMessage 信息版 App(可在 iMessage App Store 中获取).可作为独立 App,也 ...

  5. akka设计模式系列-Backend模式

    上一节我们介绍了Akka使用的基本模式,简单点来说就是,发消息给actor,处理结束后返回消息.但这种模式有个缺陷,就是一旦某个消息处理的比较慢,就会阻塞后面所有消息的处理.那么有没有方法规避这种阻塞 ...

  6. mahjong

    题目描述 “为什么, 你们的力量在哪里得到如此地......”“我们比 1 分钟前的我们还要进步, 虽然很微小, 但每转一圈就会前进一寸.这就是钻头啊!”“那才是通向毁灭的道路.为什么就没有意识到螺旋 ...

  7. longpo的回文

    啊...比赛的时候输入打错了,结束之后还照着题解把DP部分重构了一遍然而还是WA...样例都没过,然后直接输了-1 明显的DP...而且数据范围这么小,显然怎么搞都可以... 而且这样的回文的DP是很 ...

  8. Linux下查看CPU和内存(很详细)

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会 ...

  9. [转]linux之pr命令

    转自:http://www.bitscn.com/plus/view.php?aid=6638 本文介绍如何使用Linux的pr命令将大文件分割成多个页面进行打印,并在每个页面上加上标题. Linux ...

  10. [转]c# 对密码执行散列和 salt 运算方法

    本文转自:http://www.cnblogs.com/CnBlogFounder/archive/2008/07/04/1235690.html 大家对密码执行散列和Salt运算一定不陌生.两个Vi ...