地址的二级联动–柳州
效果图：
.js
const app = getApp()
var that
var list = []
Page({
data: {
addressInfo: [], //记录从服务器上返回的地址
multiIndex: [0, 0, 0],
cityCode: '', //市id
regionCode: '', //区id
townCode: '', //镇id
arrAll: [
["柳州市"],
[],
[]
]
},
onLoad: function () {
that = this
that.getAddressInfo()
},
getAddressInfo: function () {
wx.request({
url: '',//地址返回的数据就是最后面注释的
method: "GET",
success(res) {
console.log("获取地址列表的结果：", res.data.data.children[0].children)
let arr2 = res.data.data.children[0].children
that.data.addressInfo = arr2 //记录到局部数组
//把从服务器上返回来的地址数组的label放到arrAll第二列
for (var i = 0; i < arr2.length; i++) {
that.data.arrAll[1][i] = arr2[i].label
}
//把从服务器上返回来的地址数组的第一个城中区的子label放到arrAll第三列
for (var i = 0; i < arr2[0].children.length; i++) {
that.data.arrAll[2][i] = arr2[0].children[i].label
}
//更新
that.setData({
arrAll: that.data.arrAll
})
console.log("查找", that.code_Townname(450226207))
console.log("查找", that.code_Regionname(450227))
},
fail(res) {
console.log("失败", res)
},
})
},
bindMultiPickerChange: function (e) {
console.log("按了确定进入：", e.detail.value)
that.setData({
multiIndex: e.detail.value
})
//使用[0,2,1]把地址中对应的code提取出来
that.data.regionCode = that.data.addressInfo[e.detail.value[1]].value //区的code赋值
that.data.townCode = that.data.addressInfo[e.detail.value[1]].children[e.detail.value[2]].value //县的code赋值
console.log("区code：", that.data.regionCode)
console.log("镇code：", that.data.townCode)
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
switch (e.detail.column) {
case 1:
list = []
//把从服务器上返回来的地址数组的--指定第几个label中的--子label，放到arrAll第三列
for (var i = 0; i < that.data.addressInfo[e.detail.value].children.length; i++) {
that.data.arrAll[2][i] = that.data.addressInfo[e.detail.value].children[i].label
}
that.setData({
arrAll: that.data.arrAll
})
}
},
/**
* 镇code转成具体地址
*/
code_Townname: function (code) {
for (let j = 0; j < that.data.addressInfo.length; j++) {
for (let i = 0; i < that.data.addressInfo[j].children.length; i++) {
// console.log('查找中：', that.data.addressInfo[j].children[i].value)
if (code == that.data.addressInfo[j].children[i].value) {
console.log('已经找到')
return that.data.addressInfo[j].children[i].label
}
}
}
return '没有找到'
},
/**
* 区code转成具体地址
*/
code_Regionname: function (code) {
for (var i = 0; i < that.data.addressInfo.length; i++) {
// that.data.arrAll[2][i] = that.data.addressInfo[e.detail.value].children[i].label
if (code == that.data.addressInfo[i].value) {
console.log('已经找到')
return that.data.addressInfo[i].label
}
}
return '没有找到'
},
})
/**
*
访问服务器返回的值为：
{"code":200,"message":"操作成功","data":{"value":450000,"label":"广西壮族自治区","children":[{"value":450200,"label":"柳州市","children":[{"value":450202,"label":"城中区","children":[{"value":450202105,"label":"河东街道"},{"value":450202107,"label":"沿江街道"},{"value":450202004,"label":"潭中街道"},{"value":450202102,"label":"公园街道"},{"value":450202103,"label":"中南街道"},{"value":450202101,"label":"城中街道"},{"value":450202106,"label":"静兰街道"}],"count":0},{"value":450203,"label":"鱼峰区","children":[{"value":450203001,"label":"天马街道"},{"value":450203002,"label":"驾鹤街道"},{"value":450203005,"label":"荣军街道"},{"value":450203003,"label":"箭盘山街道"},{"value":450203004,"label":"五里亭街道"},{"value":450203007,"label":"白莲街道"},{"value":450203008,"label":"麒麟街道"},{"value":450203009,"label":"白沙镇"},{"value":450203010,"label":"里雍镇"}],"count":0},{"value":450205,"label":"柳北区","children":[{"value":450205010,"label":"雅儒街道"},{"value":450205013,"label":"锦绣街道"},{"value":450205014,"label":"跃进街道"},{"value":450205008,"label":"解放街道"},{"value":450205009,"label":"胜利街道"},{"value":450205011,"label":"雀儿山街道"},{"value":450205000,"label":"柳长街道"},{"value":450205007,"label":"钢城街道"},{"value":450205003,"label":"白露街道"},{"value":450205006,"label":"石碑坪镇"},{"value":450205005,"label":"长塘镇"},{"value":450205004,"label":"沙塘镇"}],"count":0},{"value":450204,"label":"柳南区","children":[{"value":450204002,"label":"柳南街道"},{"value":450204004,"label":"潭西街道"},{"value":450204008,"label":"河西街道"},{"value":450204007,"label":"鹅山街道"},{"value":450204006,"label":"南站街道"},{"value":450204003,"label":"南环街道"},{"value":450204005,"label":"柳石街道"},{"value":450204009,"label":"银山街道"},{"value":450204001,"label":"太阳村镇"},{"value":450204010,"label":"流山镇"},{"value":450204011,"label":"洛满镇"}],"count":0},{"value":450206,"label":"柳江区","children":[{"value":450206013,"label":"拉堡镇"},{"value":450206011,"label":"穿山镇"},{"value":450206004,"label":"成团镇"},{"value":450206010,"label":"进德镇"},{"value":450206003,"label":"百朋镇"},{"value":450206008,"label":"三都镇"},{"value":450206009,"label":"里高镇"},{"value":450206012,"label":"土博镇"}],"count":0},{"value":450228,"label":"北部生态新区","children":[{"value":450228001,"label":"阳和街道"}],"count":0},{"value":450227,"label":"柳东新区","children":[{"value":450227001,"label":"雒容镇"},{"value":450227002,"label":"洛埠镇"}],"count":0},{"value":450223,"label":"鹿寨县","children":[{"value":450223101,"label":"平山镇"},{"value":450223100,"label":"中渡镇"},{"value":450223104,"label":"寨沙镇"},{"value":450223102,"label":"鹿寨镇"},{"value":450223200,"label":"黄冕镇"},{"value":450223201,"label":"江口乡"},{"value":450223202,"label":"导江乡"},{"value":450223205,"label":"四排镇"}],"count":0},{"value":450225,"label":"融水县","children":[{"value":450225100,"label":"融水镇"},{"value":450225101,"label":"和睦镇"},{"value":450225103,"label":"怀宝镇"},{"value":450225102,"label":"三防镇"},{"value":450225110,"label":"大浪乡"},{"value":450225201,"label":"永乐镇"},{"value":450225202,"label":"四荣乡"},{"value":450225203,"label":"香粉乡"},{"value":450225210,"label":"安陲乡"},{"value":450225214,"label":"汪洞乡"},{"value":450225207,"label":"同练瑶族乡"},{"value":450225208,"label":"滚贝侗族乡"},{"value":450225209,"label":"杆洞乡"},{"value":450225204,"label":"安太乡"},{"value":450225205,"label":"洞头镇"},{"value":450225111,"label":"大浪镇"},{"value":450225120,"label":"白云乡"},{"value":450225213,"label":"红水乡"},{"value":450225214,"label":"拱洞乡"},{"value":450225216,"label":"大年乡"},{"value":450225215,"label":"良寨乡"}],"count":0},{"value":450224,"label":"融安县","children":[{"value":450224200,"label":"雅瑶乡"},{"value":450224201,"label":"大坡乡"},{"value":450224206,"label":"东起乡"},{"value":450224204,"label":"桥板乡"},{"value":450224205,"label":"沙子乡"},{"value":450224207,"label":"潭头乡"},{"value":450224103,"label":"板榄镇"},{"value":450224104,"label":"大将镇"},{"value":450224100,"label":"长安镇"},{"value":450224101,"label":"浮石镇"},{"value":450224102,"label":"泗顶镇"},{"value":450224105,"label":"大良镇"}],"count":0},{"value":450222,"label":"柳城县","children":[{"value":450222010,"label":"冲脉镇"},{"value":450222001,"label":"大埔镇"},{"value":450222002,"label":"东泉镇"},{"value":450222003,"label":"凤山镇"},{"value":450222004,"label":"六塘镇"},{"value":450222005,"label":"龙头镇"},{"value":450222014,"label":"马山镇"},{"value":450222007,"label":"沙埔镇"},{"value":450222009,"label":"社冲乡"},{"value":450222006,"label":"太平镇"},{"value":450222013,"label":"寨隆镇"},{"value":450222011,"label":"古砦仫佬族乡"}],"count":0},{"value":450226,"label":"三江县","children":[{"value":450226101,"label":"丹洲镇"},{"value":450226102,"label":"斗江镇"},{"value":450226100,"label":" 古宜镇"},{"value":450226210,"label":"林溪镇"},{"value":450226207,"label":"富禄苗族乡"},{"value":450226203,"label":"老堡乡"},{"value":450226204,"label":"高基瑶族乡"},{"value":450226208,"label":"梅林乡"},{"value":450226205,"label":"良口乡"},{"value":450226206,"label":"洋溪乡"},{"value":450226201,"label":"程村乡"},{"value":450226202,"label":"和平乡"},{"value":450226212,"label":"同乐苗族乡"},{"value":450226209,"label":"八江镇"},{"value":450226110,"label":"独峒乡"}],"count":0}]}]}}
*/
.wxml
<view class="section">
<view class="section__title">省市二级联动demo</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{arrAll}}">
<view class="picker">
当前选择：{{arrAll[0][multiIndex[0]]}}，{{arrAll[1][multiIndex[1]]}}，{{arrAll[2][multiIndex[2]]}}
</view>
</picker>
</view>