插件描述: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. AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊

    初识Angular2 写一个Angular2的Hello World应用相当简单,分三步走: 1. 引入Angular2预定义类型 import {Component,View,bootstrap} ...

  2. 特征变化--->特征向量中部分特征到类别索引的转换(VectorIndexer)

    VectorIndexer: 倘若所有特征都已经被组织在一个向量中,又想对其中某些单个分量进行处理时,Spark ML提供了VectorIndexer类来解决向量数据集中的类别性特征转换. 通过为其提 ...

  3. 91. Ext中获取combobox中的valueField和displayField的值

    转自:https://blog.csdn.net/jcy472578/article/details/42113119Ext.getCmp("schemaVersion").val ...

  4. es6 import 与 export

    1.export 命令 export 命令用于规定模块的对外接口. 一个模块就是一个独立的文件.该文件内部所有的变量,外部无法获取.要想外部能够读取模块内部的某个变量,就必须使用 export 关键字 ...

  5. [App Store Connect帮助]二、 添加、编辑和删除用户(6)生成 API 密钥

    如果已批准您访问 App Store Connect API,您可以生成 API 密钥,以便使用该密钥配置.认证和使用 App Store Connect 服务. 有关管理和保护您密钥的更多信息,请参 ...

  6. JavaScript--显示和隐藏(display属性)

    网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对象,如通过document.get ...

  7. BZOJ 4173 数论

    思路: $(m%k+n%k>=k) *phi(k)$ $我们不妨设n=q_1k+r_1 m=q_2k+r$2 $n+m=(q_1+q_2)k+r1+r2$ ${\lfloor}\frac{n+m ...

  8. Mac上随时切换PYTHON版本

    在MAC上,默认安装了python2.*,自己又安装了python3.*:假如我们需要在终端上随时切换python控制台到需要的版本,可以采用下面的方法. 1.用命令   sudo vi ~/.bas ...

  9. hcode视频教程中心(学习h5和hbuilder等)

    网站: http://www.hcoder.net/course

  10. 使用FastReport的BarCode2D控件生成含中文的PDF417条形码

    解决方法:设定CodePage为936 FastReport用户手册中关于CodePage的说明: CodePage This property is specific to the PDF417 a ...