小程序開發中實現地址頁面三級聯動的方法

小編給大家分享一下小程序開發中實現地址頁面三級聯動的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我遇到的問題是

cdn.xitu.io/2018/5/29/163aa02a0f83cf57?imageView2/0/w/1280/h/960/format/webp/ignore-error/1">

后端給我的數據里面有每一個地址對應的ID，比如北京：2 北京：50 東城區：500

處理這個數據的時候，我根據原來大神的代碼做了一些修改，

let val = e.detail.value,
            t = this.data.values,
            cityData = this.data.cityData,
            index = this.data.id,
            list = this.data.addrList;
            list[index].area = true;
            try {                if (val[0] != t[0]) { //當val是選擇省份的時候
                const citys = [];
                const countys = [];
                    cityData[val[0]].child.map(item => citys.push({name:item.name,id:item.id}));
                    cityData[val[0]].child[0].child.map(item => countys.push({name:item.name,id:item.id}));
                    list[index].provinceName = this.data.provinces[val[0]].name;//省份
                    list[index].cityName = cityData[val[0]].child[0].name;//城市
                    list[index].districtName = cityData[val[0]].child[0].child[0].name;//地區
                    list[index].province = this.data.provinces[val[0]].id;//對應的傳值ID
                    list[index].city = cityData[val[0]].child[0].id;//對應的傳值ID
                    list[index].district = cityData[val[0]].child[0].child[0].id;//對應的傳值ID
                this.setData({
                    citys: citys,
                    countys: countys,
                    values: val,
                    value: [val[0], 0, 0],
                    addrList: list
                })                    return;
                }                if (val[1] != t[1]) {//當val是選擇城市的時候
                    const countys = [];
                    cityData[val[0]].child[val[1]].child.map(item => countys.push({name:item.name,id:item.id}));
                    list[index].cityName = this.data.citys[val[1]].name;// 選擇城市
                    list[index].city = this.data.citys[val[1]].id;//對應的傳值ID
                    list[index].districtName = cityData[val[0]].child[val[1]].child[0].name;//選擇城市對應的地區
                    list[index].district = cityData[val[0]].child[val[1]].child[0].id;//對應的傳值ID
                    this.setData({
                        countys: countys,
                        values: val,
                        value: [val[0], val[1], 0],
                        addrList: list
                    })                    return;
                }                if (val[2] != t[2]) {//當val是選擇地區的時候
                    list[index].districtName = this.data.countys[val[2]].name;//選擇地區
                    list[index].district = this.data.countys[val[2]].id;//對應的傳值ID
                    this.setData({
                        county: this.data.countys[val[2]].name,
                        values: val,
                        addrList: list
                    })                    return;
                }    

            } catch(e) {
                // statements
                console.log(e);
            }
list里面是有 收貨人，電話，等等信息  但是我只操作改變數組里面地址改變的信息，

布局方面需要做一些修改的地方就是

看完了這篇文章，相信你對小程序開發中實現地址頁面三級聯動的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！