微信小程序三级联动之多列选择器 有些时候，三级联动业务场景并不只是全国地区选择，可能还涉及到自定义分类的三级联动，这时就需要使用微信的多列选择器。如果只是一列字段，或者每次拖动一次都去服务端取，会比较容易。 如果想一次定义好json,关联数据相对比较复杂，此案例json结构如下：效果如下实现过程1.WXML(这是一段微信官方文档的代码)<view class="section"> <view class="section__title">普通选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> <picker bindchange="bindPickerChange1" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> 2.js 逻辑部分 // 第一步 data 定义数据 ssl:地区json //第二步 设置默认三级联动数据 Onload //获取省市区json var ssls = this.data.ssl; //定义对应变量 var sheng = []; var shi = []; var qu = []; for (var i in ssls) { sheng.push(ssls[i].p_name) if (i == 0) { for (var u in ssls[i].p_city) { // console.log(ssls[i].p_city[u].c_name) shi.push(ssls[i].p_city[u].c_name) for (var j in ssls[i].p_city[u].p_district) { // console.log(ssls[i].p_city[u].c_name) qu.push(ssls[i].p_city[u].p_district[j].d_name) } } } } console.log(sheng, shi); this.setData({ multiArray: [sheng, shi, qu] }); //第三步：选择对应的value值改变 bindMultiPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, //第四步：下拉拖动选项事件（这里只需要处理第一栏，与第二栏【因为第三栏拖动的时候，没有第四栏关联变动了，关于此处讲的栏，请看代码后图1-3】） bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: this.setData({ thisSheng: e.detail.value }) //此处是拖动第一栏的时候处理 var row = this.getCity(e.detail.value); data.multiArray[1] = row[0]; data.multiArray[2] = row[1]; //此处默认选中第一项 data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: //此处是拖动第二栏的时候处理 var row = this.getCity(this.data.thisSheng, e.detail.value); console.log(row); data.multiArray[2] = row[1]; data.multiIndex[2] = 0; console.log(data.multiIndex); break; } this.setData(data); },关键处理函数// 获取城市信息 getCity: function (x, y = 999, z = 999) { console.log("xy", x, y); var ssls = this.data.ssl; var shi = []; var qu = []; for (var i in ssls) { if (i == x) { for (var u in ssls[i].p_city) { shi.push(ssls[i].p_city[u].c_name) if (u == y) { for (var j in ssls[i].p_city[u].p_district) { qu.push(ssls[i].p_city[u].p_district[j].d_name) } break; } if (y == 999) { for (var j in ssls[i].p_city[u].p_district) { qu.push(ssls[i].p_city[u].p_district[j].d_name) } } } break; } } console.log(shi); return [shi, qu]; },代码下载地址：https://github.com/magic007/weApp/tree/master/multiSelector基本手动实现一次官方的全国地区选择功能，只是相比官方更灵活，能添加更多种类型。