中国省市区地址三级联动jQuery插件 - distpicker

下载地址

distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单,简单设置即可完成中国省市区地址联动效果。使用方法HTML结构基本的HTML结构是使用一个

容器来包裹一组元素。

你可以直接通过data-toggle="distpicker"实现来进行初始化。

也可以显示占位文本。

或者自定义省市区。

初始化插件在页面DOM元素加载完毕之后,可以通过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文件中存在该区,将会被选择,否则显示占位文本

5ba447f35bb29fb1d0ceb6a26d5568f451613.jpg

dd:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简介CJPCD 是一款原生开源的 javascript 插件,用于生成省市区选择器,基本用法十分简单。使用方法最简单的使用只需要两个步骤:放置容器,引入依赖<!--存放省市区数据的三个 select--> <select id="province"></select> <select id="city"></select> <select id="district"></select> <!--引入插件--> [removed][removed]调用方法var pcd = new CJPCD('province','city','district');效果如下图API初始化/**     provinceId :省份 select id     cityId     :城市 select id     districtId :县区 select id */ var pcd = new CJPCD(provinceId,cityId,districtId);设置初始值/**     provinceName :省份名称     cityName     :城市名称     districtName :县区名称     注意:前提是必须初始化 */ pcd.setUp('provinceName','cityName','districtName');eg:var pcd = new CJPCD('provinceId','cityId','districtId');//先初始化 pcd.setUp("广东省","广州市","越秀区");//设置值使用场景:设置值一般用于地址信息的修改重置pcd.reSet();获取值pcd.getValue('json');//指定以json对象返回 pcd.getValue();//默认以json对象返回,效果同上json 对象返回如下:{"province":"广东省","city":"广州市","district":"越秀区"};指定拼接成一定格式的字符串进行返回,以逗号为例(当然也可以使用其他字符串)pcd.getValue(',');//结果使用逗号拼接成字符串返回值如下"广东省,广州市,越秀区"补充说明如果业务中涉及多组地址选择,请创建多个 CJPCD 实例 如var pcd1 = new CJPCD(provinceId1,cityId1,districtId1); var pcd2 = new CJPCD(provinceId2,cityId2,districtId2); ... var pcdn = new CJPCD(provinceIdn,cityIdn,districtIdn);  标签:省市区三级联动
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值