本文整理自网络，侵删。
本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下
先看效果图
html部分
用小程序的piceker-view 嵌入页面的滚动选择器
<picker-view indicator-style="height: 50px;" style="width:100%; height: 400rpx;" bindchange="bindChange">
<picker-view-column class="selectItem">
<view class="tooth" wx:for="{{province}}" wx:key="this">{{item.name}}</view>
</picker-view-column>
<picker-view-column class="selectItem">
<view class="tooth" wx:for="{{city}}" wx:key="this">{{item.name}}</view>
</picker-view-column>
<picker-view-column class="selectItem">
<view class="tooth" wx:for="{{area}}" wx:key="this">{{item.name}}</view>
</picker-view-column>
</picker-view>
js部分
这部分代码其实是因为后端同学太懒了，数据没有整理就直接返回过来了。我人微言轻的，只好自己默默地整理了。
// 把数据格式化成页面现实的形式
formatCityData: function () {
var that = this,
region = that.data.region,
selectItems = [],
province = [],
city = [],
area = [],
area_index = that.data.area_index,
city_index = that.data.city_index,
province_index = that.data.province_index;
// 第一遍格式化数据，
for (var i = 0; i < region.length; i++) {
if (region[i].parent_id == 1) {
var provinceItem = region[i];
var selectItem1 = { label: provinceItem.zh_name, provinceId: provinceItem.id, children: [] };
for (var j = 0; j < region.length; j++) {
if (region[j].parent_id == provinceItem.id) {
var cityItem = region[j];
var selectItem2 = { label: cityItem.zh_name, cityId: cityItem.id, children: [] };
selectItem1.children.push(selectItem2);
for (var k = 0; k < region.length; k++) {
if (region[k].parent_id == cityItem.id) {
var areaItem = region[k];
var selectItem3 = { label: areaItem.zh_name, areaId: areaItem.id, children: [] };
selectItem2.children.push(selectItem3);
}
}
}
}
selectItems.push(selectItem1);
}
}
// 遍历所有的数据。将省的名字放在对应的数组中
for (let i = 0; i < selectItems.length; i++) {
province.push({
name: selectItems[i].label,
id: selectItems[i].provinceId
});
}
if (selectItems[province_index].children && selectItems[province_index].children) {// 判断选中的省级里面有没有市
if (selectItems[province_index].children[city_index]) {
for (let i = 0; i < selectItems[province_index].children.length; i++) {
city.push({
name: selectItems[province_index].children[i].label,
id: selectItems[province_index].children[i].cityId
});
}
if (selectItems[province_index].children[city_index].children) {
if (selectItems[province_index].children[city_index].children[area_index]) {
for (let i = 0; i < selectItems[province_index].children[city_index].children.length; i++) {
area.push({
name: selectItems[province_index].children[city_index].children[i].label,
id: selectItems[province_index].children[city_index].children[i].areaId
});
}
} else {
that.setData({
area_index: 0
});
for (let i = 0; i < selectItems[province_index].children[city_index].childre.length; i++) {
area.push({
name: selectItems[province_index].children[city_index].children[i].label,
id: selectItems[province_index].children[city_index].children[i].areaId
});
}
}
} else {
area.push({
name: province[province_index].children[city_index].label,
id: province[province_index].children[city_index].areaId
});
}
} else {
that.setData({
city_index: 0
});
for (let i = 0; i < selectItems[province_index].childre.length; i++) {
city.push({
name: selectItems[province_index].children[i].label,
id: selectItems[province_index].children[i].cityId
});
}
}
} else {
// 如果该省没有市，那么就把省的名字作为市和区的名字
city.push({
name: province[province_index].label,
id: province[province_index].cityId
});
area.push({
name: province[province_index].label,
id: province[province_index].areaId
});
}
// 选择成功后把对应的数组赋值给相应的变量
that.setData({
province: province,
city: city,
area: area
});
provincialCity = {
province: {
name: province[that.data.province_index].name,
id: province[that.data.province_index].id,
},
city: {
name: city[that.data.city_index].name,
id: city[that.data.city_index].id
},
area: {
name: area[that.data.area_index].name,
id: area[that.data.area_index].id
}
}
},
后台返回的格式如下：
相关阅读 >>
ECSHOP完美解决deprecated preg_replace()报错的问题
ECSHOP去掉版权copyright powered by ECSHOP 去掉商标志logo
更多相关阅读请进入《ECSHOP》频道 >>
