微信小程序下拉框插件_微信小程序三级联动下拉框插件

本文介绍如何在微信小程序中实现三级联动的下拉框功能,包括点击事件触发、取消选择、确认选择的操作逻辑,以及根据省份和城市代码筛选对应区域的数据处理方法。
摘要由CSDN通过智能技术生成

//点击事件,点击弹出选择页

areaTap: function () {

this.setData({

addressMenuIsShow:true

})

},

cityCancel: function () {

this.setData({

addressMenuIsShow: false

})

},

cityComfirm: function (e) {

var p_index = this.data.value[0];

var c_index = this.data.value[1];

var r_index = this.data.value[2];

var p = (p_index > 0) ? this.data.provinces[p_index - 1].item_name : "--选择省份-";

var c = (c_index > 0) ? this.data.cities[c_index - 1].item_name : "-选择城市-";

var r = (r_index > 0) ? this.data.regions[r_index - 1].item_name : "-选择地区--";

this.setData({

addressMenuIsShow: false,

pickerP: p,

pickerC: c,

pickerR: r

})

},

cityChange: function (e) {

var value = e.detail.value;

var provinces = this.data.provinces;

var cList = [];

var regions = [];

var provinceNum = value[0];

var cityNum = value[1];

var regionNum = value[2];

// 如果省份选择项和之前不一样,表示滑动了省份

if (this.data.value[0] != provinceNum) {

if (provinceNum > 0) {

var province_code = (arealist.provinceData[provinceNum-1].item_code).slice(0, 2);

console.log(arealist.provinceData[provinceNum - 1])

var city_reg = new RegExp("^" + province_code + "[0-9]{2}00$");

for (var i = 0; i < arealist.cityData.length; i++) {

if (city_reg.test(arealist.cityData[i].item_code)) {

cList.push(arealist.cityData[i])

}

}

this.setData({

value: [provinceNum, -1, -1],

cities: cList,

regions: []

})

} else {

this.setData({

value: [-1, -1, -1],

cities: [],

regions: []

})

}

} else if (this.data.value[1] != cityNum) { // 如果城市选择项和之前不一样,表示滑动了城市

if (cityNum >0) {

var city_code = this.data.cities[cityNum - 1].item_code.slice(0,4);

var city_reg = new RegExp("^" + city_code+"[0-9]{2}$");

for (var i = 0,l = arealist.regionData.length; i < l;i++){

if (city_reg.test(arealist.regionData[i].item_code)){

regions.push(arealist.regionData[i]);

}

}

this.setData({

value: [provinceNum, cityNum, -1],

regions: regions

})

} else {

this.setData({

value: [provinceNum, -1, -1],

regions: []

})

}

} else if (this.data.value[2] != regionNum) { // 如果城市选择项和之前不一样,表示滑动了城市

this.setData({

value: [provinceNum, cityNum, regionNum],

})

}

}

……

省市 json数据:

const provinceData = [

{"item_code":"110000","item_name":"北京市"},

{"item_code":"120000","item_name":"天津市"},

{"item_code":"130000","item_name":"河北省"},

{"item_code":"140000","item_name":"山西省"},

{"item_code":"150000","item_name":"内蒙古自治区"},

{"item_code":"210000","item_name":"辽宁省"},

{"item_code":"220000","item_name":"吉林省"},

……

]

const cityData = [

{"item_code":"110100","item_name":"北京市"},

{"item_code":"120100","item_name":"天津市"},

{"item_code":"130100","item_name":"石家庄市"},

{"item_code":"130200","item_name":"唐山市"},

{"item_code":"130300","item_name":"秦皇岛市"},

{"item_code":"130400","item_name":"邯郸市"},

{"item_code":"130500","item_name":"邢台市"},

{"item_code":"130600","item_name":"保定市"},

……

]

const regionData=[

{"item_code":"110101","item_name":"东城区"},

{"item_code":"110102","item_name":"西城区"},

{"item_code":"110105","item_name":"朝阳区"},

{"item_code":"110106","item_name":"丰台区"},

{"item_code":"110107","item_name":"石景山区"},

{"item_code":"110108","item_name":"海淀区"},

{"item_code":"110109","item_name":"门头沟区"},

……

]

module.exports = {

provinceData: provinceData,

cityData: cityData,

regionData: regionData

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值