中国省市区地址三级联动插件---jQuery Distpicker
插件描述: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-provincedata-citydata-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的更多相关文章
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 省市区地址三级联动jQuery插件Distpicker使用
插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...
- jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- 省市区三级联动[JSON+Jquery]
<!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...
- Vue如何使用vue-area-linkage实现地址三级联动效果
很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1. ...
- 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
随机推荐
- Codeforces--597A--Divisibility(数学)
DivisibilityCrawling in process... Crawling failed Time Limit:1000MS Memory Limit:262144KB ...
- [Swift通天遁地]四、网络和线程-(7)检测服务器接口的访问状态:验证请求结果和可访问性
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 深入理解JWT的使用场景和优劣
前面简单介绍了JWT的基础只是和简单的小Demo,但是对于JWT的应用场景和优缺点掌握的还够,这些东西只有自己实践过才能搞清楚其中的细节.在网上看到一个大佬对这块讲的比较好,就转载过来一起学习下. 原 ...
- javascript中for...in和for...of的区别
for...of循环是ES6引入的新的语法. for...in遍历拿到的x是键(下标).而for...of遍历拿到的x是值,但在对象中会提示不是一个迭代器报错.例子如下: let x; let a = ...
- Android内存管理(9)*MAT:Heap Dump,Shallow Heap,Retained Heap,Dominating Tree,GC Roots等的含义
原文: http://help.eclipse.org/mars/index.jsp?topic=%2Forg.eclipse.mat.ui.help%2Fconcepts%2Fheapdump.ht ...
- 解决gradle project refresh failed: protocol family unavailable问题的几种方法
Android Studio从版本1.5更新到2.1之后,打开Android Studio一直提示: gradle project refresh failed: protocol family un ...
- Laravel5.1学习笔记16 数据库2 查询构造器(这个不用看,不如用EloquentORM)
Introduction Retrieving Results Aggregates Selects Joins Unions Where Clauses Advanced Where Clauses ...
- Laravel5.1学习笔记13 系统架构5 Contract
Contract 简介 为什么要用 Contract? Contract 参考 如何使用 Contract 简介 Laravel 中的 Contract 是一组定义了框架核心服务的接口.例如,Illu ...
- html5——web存储
基本概念 1.传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便 2.h5存储设置.读取方便,而且容量较大,sessio ...
- jQuery——入口函数
中文网 http://www.css88.com/jqapi-1.9/ 版本兼容问题 版本一:1.x版本,兼容IE678 版本二:2.x版本,不兼容IE678 入口函数区别 <script> ...