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():销毁插件实例。 |