微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級聯(lián)動

更新時間：2022年07月11日 10:37:25 作者：theOtherSky

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

這里采用的是自定義多列選擇器picker mode="multiSelector"

<view class="section">
? ? <view class="section__title">多列選擇器</view>
? ? <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
? ? ? <view wx:if="{{multiIndex[0]==0}}" class="picker" style='font-size:24rpx'>
? ? ? ? 當(dāng)前選擇：全國
? ? ? </view>
? ? ? <view wx:elif="{{multiIndex[1]==0}}" class="picker" style='font-size:24rpx'>
? ? ? ? 當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}
? ? ? </view>
? ? ? <view wx:elif="{{multiIndex[2]==0}}" class="picker" style='font-size:24rpx'>
? ? ? ? 當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
? ? ? </view>
? ? ? <view wx:elif="{{multiIndex[3]==0}}" class="picker" style='font-size:24rpx'>
? ? ? ? 當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
? ? ? </view>
? ? ? <view wx:else class="picker" style='font-size:24rpx'>
? ? ? ? 當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}-{{multiArray[3][multiIndex[3]]}}
? ? ? </view>
? ? </picker>
</view>

multiArray包含4個數(shù)組（省市縣鎮(zhèn)），multiIndex是4個數(shù)組對應(yīng)選中下標(biāo)

onLoad: async function (options) {
?? ?let chinaData = await getCountryList()
?? ?chinaData.unshift({city: [],code: 0,name: "全部"})
?? ?for(let one of chinaData){
?? ??? ?one.city.unshift({county: [],code: 0,name: "全部"})
?? ??? ?for(let two of one.city){
?? ??? ??? ?two.county.unshift({code: 0,name: "全部"})
?? ??? ?}
?? ?}
? ? this.data.chinaData = chinaData;
? ? let sheng = []; // ?設(shè)置省數(shù)組
? ? for(let i = 0; i < chinaData.length; i++) {
? ? ? ?sheng.push(chinaData[i].name);
? ? }
? ? this.setData({
? ? ? ?"multiArray[0]": sheng
? ? })
? ? this.getCity(); // 得到市
},
? ? bindMultiPickerChange: function(e) {
?? ??? ?console.log(e);
?? ?},
?? ?bindMultiPickerColumnChange: function(e) {
?? ??? ?let move = e.detail;
?? ??? ?let index = move.column;
?? ??? ?let value = move.value;
?? ??? ?if (index == 0) {
?? ??? ? ?this.setData({
?? ??? ??? ?multiIndex: [value,0,0,0]
?? ??? ? ?})
?? ??? ? ?this.getCity();
?? ??? ?}
?? ??? ?if (index == 1) {
?? ??? ? ?this.setData({
?? ??? ??? ?"multiIndex[1]": value,
?? ??? ??? ?"multiIndex[2]": 0,
?? ??? ??? ?"multiIndex[3]": 0
?? ??? ? ?})
?? ??? ? ?this.getXian();
?? ??? ?}
?? ??? ?if (index == 2) {
?? ??? ? ?this.setData({
?? ??? ??? ?"multiIndex[2]": value,
?? ??? ??? ?"multiIndex[3]": 0,
?? ??
?? ??? ? ?})
?? ??? ? ?this.getZhen();
?? ??? ?}
?? ??? ?if (index == 3) {
?? ??? ? ?this.setData({
?? ??? ??? ?"multiIndex[3]": value
?? ??? ? ?})
?? ??? ? ?this.getZhen();
?? ??? ?}
?? ?},
?? ?getCity: function() { // ?得到市
?? ??? ?let shengNum = this.data.multiIndex[0];
?? ??? ?let chinaData = this.data.chinaData;
?? ??? ?let cityData = chinaData[shengNum].city;
?? ??? ?let city = [];
?? ??? ?for (let i = 0; i < cityData.length; i++) {
?? ??? ? ?city.push(cityData[i].name)
?? ??? ?}
?? ??? ?this.setData({
?? ??? ? ?"multiArray[1]": city
?? ??? ?})
?? ??? ?this.getXian();
?? ?},
?? ?getXian: function(e) { // ?得到縣
?? ??? ?let shengNum = this.data.multiIndex[0];
?? ??? ?let cityNum = this.data.multiIndex[1];
?? ??? ?let chinaData = this.data.chinaData;
?? ??? ?let xianData = chinaData[shengNum].city[cityNum].county;
?? ??? ?let xian = [];
?? ??? ?for (let i = 0; i < xianData.length; i++) {
?? ??? ? ?xian.push(xianData[i].name)
?? ??? ?}
?? ??? ?this.setData({
?? ??? ? ?"multiArray[2]": xian
?? ??? ?})
?? ??? ?this.getZhen();
?? ?},
?? ?async getZhen(){// ?得到鎮(zhèn)
?? ??? ?let shengNum = this.data.multiIndex[0];
?? ??? ?let cityNum = this.data.multiIndex[1];
?? ??? ?let xianNum = this.data.multiIndex[2];
?? ??? ?let chinaData = this.data.chinaData;
?? ??? ?let zhen = [];
?? ??? ?if(chinaData[shengNum].city[cityNum].county[xianNum].code == 0){
?? ??? ??? ?this.setData({
?? ??? ??? ??? ?"multiArray[3]" : ["全部"]
?? ??? ??? ?})
?? ??? ?}else{
? ? ? ? ? ? //這里需要傳縣的code值獲取鎮(zhèn)的數(shù)據(jù)
?? ??? ??? ?let res = ?await getTownByCounty(chinaData[shengNum].city[cityNum].county[xianNum].code)
?? ??? ??? ?let zhenData = JSON.parse(res.data.data.json)
?? ??? ??? ?zhenData.unshift({code: 0,name: "全部"})
?? ??? ??? ?for (let i = 0; i < zhenData.length; i++) {
?? ??? ??? ??? ?zhen.push(zhenData[i].name)
?? ??? ??? ?}
?? ??? ??? ?this.setData({
?? ??? ??? ??? ?"multiArray[3]" : zhen
?? ??? ??? ?})
?? ??? ?}
?? ?}

省市縣數(shù)據(jù)返回類型