插件描述：distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单，简单设置即可完成中国省市区地址联动效果。
简要教程
安装
可以通过npm或bower来安装该三级联动插件。
npm install distpicker
bower install distpicker
使用方法
HTML结构
基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。
1 2 3 4 5 | <div><!-- container --> <select></select><!-- 省 --> <select></select><!-- 市 --> <select></select><!-- 区 --></div> |
你可以直接通过data-toggle="distpicker"实现来进行初始化。
1 2 3 4 5 | <div data-toggle="distpicker"><!-- container --> <select></select><!-- 省 --> <select></select><!-- 市 --> <select></select><!-- 区 --></div> |
也可以显示占位文本。
1 2 3 4 5 | <div data-toggle="distpicker"> <select data-province="---- 选择省 ----"></select> <select data-city="---- 选择市 ----"></select> <select data-district="---- 选择区 ----"></select></div> |
或者自定义省市区。
1 2 3 4 5 | <div data-toggle="distpicker"> <select data-province="浙江省"></select> <select data-city="杭州市"></select> <select data-district="西湖区"></select></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过distpicker()方法来初始化该地址联动插件。
1 | $('#target').distpicker(); |
自定义占位文本：
1 2 3 4 5 | $('#target').distpicker({ province: '---- 所在省 ----', city: '---- 所在市 ----', district: '---- 所在区 ----'}); |
自定义省市区。
1 2 3 4 5 | $('#target').distpicker({ province: '浙江省', city: '杭州市', district: '西湖区'}); |
配置参数
可以通过以下代码来修改默认的配置参数，
1 | $().distpicker(options) |
通过以下代码来修改全局默认参数。
1 | $.fn.distpicker.setDefaults(options) |
1 2 3 4 5 | autoSelect：类型：Boolean，默认值：true。是否当省改变时自动选择市和区。placeholder：类型：Boolean，默认值：true。是否显示占位文本。province：类型：String，默认值：―― 省 ――。定义省份的初始值。如果在distpicker.data.js文件中存在该省份，将会被选择，否则显示占位文本。city：类型：String，默认值：―― 市 ――。定义市的初始值。如果在distpicker.data.js文件中存在该市，将会被选择，否则显示占位文本。district：类型：String，默认值：―― 区 ――。定义区的初始值。如果在distpicker.data.js文件中存在该区，将会被选择，否则显示占位文本。 |
方法
reset([deep])：重置select为初始状态。
deep (optional)：类型：Boolean，默认值：false。重置select为初始状态。
例如：
1 2 3 | $().distpicker('reset');$().distpicker('reset', true);destroy()：销毁插件实例。 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jquery仿微信聊天对话窗口滚动样式
- 下一个特效： 响应式banner，带手指换的特效，自定义设置属性