中国省市区地址三级联动jQuery插件 案例下载
2021-07-13 11:04
标签:ace option eset stp 三级联动 bow 简单 hold http distpicker 是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单,简单设置即可完成中国省市区地址联动效果。 可以通过npm或bower来安装该三级联动插件。 基本的HTML结构是使用一个 在页面DOM元素加载完毕之后,可以通过 可以通过 例如: distpicker三级地址联动插件的github地址为:https://github.com/fengyuanchen/distpicker 中国省市区地址三级联动jQuery插件 案例下载 标签:ace option eset stp 三级联动 bow 简单 hold http 原文地址:http://www.cnblogs.com/aliyue/p/7079513.html中国省市区地址三级联动jQuery插件 案例下载
安装
npm install distpicker
bower install distpicker
使用方法
HTML结构
元素。
div>
select>select>
select>select>
select>select>
div>
data-toggle="distpicker"
实现来进行初始化。div data-toggle="distpicker" >
select>select>
select>select>
select>select>
div>
div data-toggle="distpicker">
select data-province="---- 选择省 ----">select>
select data-city="---- 选择市 ----">select>
select data-district="---- 选择区 ----">select>
div>
div data-toggle="distpicker">
select data-province="浙江省">select>
select data-city="杭州市">select>
select data-district="西湖区">select>
div>
初始化插件
distpicker()
方法来初始化该地址联动插件。$(‘#target‘).distpicker();
$(‘#target‘).distpicker({
province: ‘---- 所在省 ----‘,
city: ‘---- 所在市 ----‘,
district: ‘---- 所在区 ----‘
});
$(‘#target‘).distpicker({
province: ‘浙江省‘,
city: ‘杭州市‘,
district: ‘西湖区‘
});
配置参数
$().distpicker(options)
来修改默认的配置参数,通过$.fn.distpicker.setDefaults(options)
来修改全局默认参数。
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为初始状态。$().distpicker(‘reset‘);
$().distpicker(‘reset‘, true);
destroy()
:销毁插件实例。
文章标题:中国省市区地址三级联动jQuery插件 案例下载
文章链接:http://soscw.com/index.php/essay/104596.html