版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82667694
http://www.jq22.com/jquery-info8054
插件描述：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文件中存在该区，将会被选择，否则显示占位文本。
|
方法
例如：
| 1 2 3 |
$().distpicker('reset');
$().distpicker('reset', true);
destroy()：销毁插件实例。
|