插件描述: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. Set的非重复判断是根据什么判断的

    HashSet 首先来看下HashSet的add()这个方法的源代码: public boolean add(E e) { return map.put(e, PRESENT)==null; } 由此 ...

  2. js:正则表达

    一:正则表达对象方法 1:compile()方法   //编译正则表达式 实例:在字符串中全局搜索“man”,并用“person”替换,然后通过compile()方法,改变正则表达式,用person替 ...

  3. [Swift通天遁地]九、拔剑吧-(9)创建支持缩放、移动、裁切的相机视图控制器

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. BigInteger、BigDecimal类的使用详解

    我们都知道在java里边long算是存储长度比较大的了,但是如果有很大的数我们应该怎么处理呢,不用怕,java还为我们准备了一个BigInteger的类,那么这个类到底能存储多大的数呢,这个一时还真不 ...

  5. RocketMQ(2)

    1. 消费端集群消费(负载均衡) 示例代码: /** * Producer,发送消息 * */ public class Producer { public static void main(Stri ...

  6. centos语言设置

    . echo $LANG可以查看当前使用的系统语言 . 在终端输入 locale命令,如有zh cn 表示已经安装了中文 . 安装中文语言包yum groupinstall chinese-suppo ...

  7. 357 Count Numbers with Unique Digits 计算各个位数不同的数字个数

    给定一个非负整数 n,计算各位数字都不同的数字 x 的个数,其中 0 ≤ x < 10n.示例:给定 n = 2,返回 91.(答案应该是除[11,22,33,44,55,66,77,88,99 ...

  8. 如何查看jdk的版本

    (1)WINDOWS环境下 实验环境:WIN7 64bit 操作指令:cmd命令下输入“java -version” 参考如下:JDK1.7 (2).LINUX环境下 实验环境:CentOS 5.6 ...

  9. [转]Linux中set,env和export这三个命令的区别

    转自:http://www.2cto.com/os/201306/223758.html Linux中set,env和export这三个命令的区别   set命令显示当前shell的变量,包括当前用户 ...

  10. Hadoop Hive概念学习系列之hive里的扩展接口(CLI、Beeline、JDBC)(十六)

    <Spark最佳实战  陈欢>写的这本书,关于此知识点,非常好,在94页. hive里的扩展接口,主要包括CLI(控制命令行接口).Beeline和JDBC等方式访问Hive. CLI和B ...