微信小程序实现地区选择伪五级联动

本文实例为大家分享了微信小程序实现地区选择伪五级联动的具体代码，供大家参考，具体内容如下
效果图

这里采用的是自定义多列选择器picker mode="multiSelector"

1. <view class="section">
2.   <view class="section__title">多列选择器</view>
3.   <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
4.    <view wx:if="{{multiIndex[0]==0}}" class="picker" style='font-size:24rpx'>
5.     当前选择：全国
6.    </view>
7.    <view wx:elif="{{multiIndex[1]==0}}" class="picker" style='font-size:24rpx'>
8.     当前选择：{{multiArray[0][multiIndex[0]]}}
9.    </view>
10.    <view wx:elif="{{multiIndex[2]==0}}" class="picker" style='font-size:24rpx'>
11.     当前选择：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
12.    </view>
13.    <view wx:elif="{{multiIndex[3]==0}}" class="picker" style='font-size:24rpx'>
14.     当前选择：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
15.    </view>
16.    <view wx:else class="picker" style='font-size:24rpx'>
17.     当前选择：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}-{{multiArray[3][multiIndex[3]]}}
18.    </view>
19.   </picker>
20. </view>

复制代码

multiArray包含4个数组（市县镇），multiIndex是4个数组对应选中下标

1. onLoad: async function (options) {
2. let chinaData = await getCountryList()
3. chinaData.unshift({city: [],code: 0,name: "全部"})
4. for(let one of chinaData){
5.   one.city.unshift({county: [],code: 0,name: "全部"})
6.   for(let two of one.city){
7.    two.county.unshift({code: 0,name: "全部"})
8.   }
9. }
10.   this.data.chinaData = chinaData;
11.   let sheng = []; // 设置省数组
12.   for(let i = 0; i < chinaData.length; i++) {
13.    sheng.push(chinaData[i].name);
14.   }
15.   this.setData({
16.    "multiArray[0]": sheng
17.   })
18.   this.getCity(); // 得到市
19. },
20.   bindMultiPickerChange: function(e) {
21.   console.log(e);
22. },
23. bindMultiPickerColumnChange: function(e) {
24.   let move = e.detail;
25.   let index = move.column;
26.   let value = move.value;
27.   if (index == 0) {
28.    this.setData({
29.    multiIndex: [value,0,0,0]
30.    })
31.    this.getCity();
32.   }
33.   if (index == 1) {
34.    this.setData({
35.    "multiIndex[1]": value,
36.    "multiIndex[2]": 0,
37.    "multiIndex[3]": 0
38.    })
39.    this.getXian();
40.   }
41.   if (index == 2) {
42.    this.setData({
43.    "multiIndex[2]": value,
44.    "multiIndex[3]": 0,
46.    })
47.    this.getZhen();
48.   }
49.   if (index == 3) {
50.    this.setData({
51.    "multiIndex[3]": value
52.    })
53.    this.getZhen();
54.   }
55. },
56. getCity: function() { // 得到市
57.   let shengNum = this.data.multiIndex[0];
58.   let chinaData = this.data.chinaData;
59.   let cityData = chinaData[shengNum].city;
60.   let city = [];
61.   for (let i = 0; i < cityData.length; i++) {
62.    city.push(cityData[i].name)
63.   }
64.   this.setData({
65.    "multiArray[1]": city
66.   })
67.   this.getXian();
68. },
69. getXian: function(e) { // 得到县
70.   let shengNum = this.data.multiIndex[0];
71.   let cityNum = this.data.multiIndex[1];
72.   let chinaData = this.data.chinaData;
73.   let xianData = chinaData[shengNum].city[cityNum].county;
74.   let xian = [];
75.   for (let i = 0; i < xianData.length; i++) {
76.    xian.push(xianData[i].name)
77.   }
78.   this.setData({
79.    "multiArray[2]": xian
80.   })
81.   this.getZhen();
82. },
83. async getZhen(){// 得到镇
84.   let shengNum = this.data.multiIndex[0];
85.   let cityNum = this.data.multiIndex[1];
86.   let xianNum = this.data.multiIndex[2];
87.   let chinaData = this.data.chinaData;
88.   let zhen = [];
89.   if(chinaData[shengNum].city[cityNum].county[xianNum].code == 0){
90.    this.setData({
91.     "multiArray[3]" : ["全部"]
92.    })
93.   }else{
94.       //这里需要传县的code值获取镇的数据
95.    let res = await getTownByCounty(chinaData[shengNum].city[cityNum].county[xianNum].code)
96.    let zhenData = JSON.parse(res.data.data.json)
97.    zhenData.unshift({code: 0,name: "全部"})
98.    for (let i = 0; i < zhenData.length; i++) {
99.     zhen.push(zhenData[i].name)
100.    }
101.    this.setData({
102.     "multiArray[3]" : zhen
103.    })
104.   }
105. }

复制代码

省市县数据返回类型

镇返回数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。