之前写了一个省市区分开选择的demo,后来干脆再弄一个合并的,记录一下。
wxml
<view class="section">
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="text">
<view class="picker">
当前选择:{{multiArray[0][multiIndex[0]].text}}-{{multiArray[1][multiIndex[1]].text}}-{{multiArray[2][multiIndex[2]].text}}
</view>
</picker>
</view>
js
Page({
data: {
multiArray: [[
{
value: "000",
text: "河北省",
children: [
{
value: "130100",
text: "石家庄市",
children: [{
value: "130102",
text: "长安区"
}, {
value: "130103",
text: "桥东区"
}, {
value: "130104",
text: "桥西区"
}, {
value: "130105",
text: "新华区"
}, {
value: "130107",
text: "井陉矿区"
}, {
value: "130108",
text: "裕华区"
}, {
value: "130121",
text: "井陉县"
}, {
value: "130123",
text: "正定县"
}, {
value: "130124",
text: "栾城县"
}, {
value: "130125",
text: "行唐县"
}, {
value: "130126",
text: "灵寿县"
}, {
value: "130127",
text: "高邑县"
}, {
value: "130128",
text: "深泽县"
}, {
value: "130129",
text: "赞皇县"
}, {
value: "130130",
text: "无极县"
}, {
value: "130131",
text: "平山县"
}, {
value: "130132",
text: "元氏县"
}, {
value: "130133",
text: "赵县"
}, {
value: "130181",
text: "辛集市"
}, {
value: "130182",
text: "藁城市"
}, {
value: "130183",
text: "晋州市"
}, {
value: "130184",
text: "新乐市"
}, {
value: "130185",
text: "鹿泉市"
}, {
value: "130186",
text: "其它区"
}]
}, {
value: "130200",
text: "唐山市",
children: [{
value: "130202",
text: "路南区"
}, {
value: "130203",
text: "路北区"
}, {
value: "130204",
text: "古冶区"
}, {
value: "130205",
text: "开平区"
}, {
value: "130207",
text: "丰南区"
}, {
value: "130208",
text: "丰润区"
}, {
value: "130223",
text: "滦县"
}, {
value: "130224",
text: "滦南县"
}, {
value: "130225",
text: "乐亭县"
}, {
value: "130227",
text: "迁西县"
}, {
value: "130229",
text: "玉田县"
}, {
value: "130230",
text: "唐海县"
}, {
value: "130281",
text: "遵化市"
}, {
value: "130283",
text: "迁安市"
}, {
value: "130284",
text: "其它区"
}]
}, {
value: "130300",
text: "秦皇岛市",
children: [{
value: "130302",
text: "海港区"
}, {
value: "130303",
text: "山海关区"
}, {
value: "130304",
text: "北戴河区"
}, {
value: "130321",
text: "青龙满族自治县"
}, {
value: "130322",
text: "昌黎县"
}, {
value: "130323",
text: "抚宁县"
}, {
value: "130324",
text: "卢龙县"
}, {
value: "130398",
text: "其它区"
}, {
value: "130399",
text: "经济技术开发区"
}]
}, {
value: "130400",
text: "邯郸市",
children: [{
value: "130402",
text: "邯山区"
}, {
value: "130403",
text: "丛台区"
}, {
value: "130404",
text: "复兴区"
}, {
value: "130406",
text: "峰峰矿区"
}, {
value: "130421",
text: "邯郸县"
}, {
value: "130423",
text: "临漳县"
}, {
value: "130424",
text: "成安县"
}, {
value: "130425",
text: "大名县"
}, {
value: "130426",
text: "涉县"
}, {
value: "130427",
text: "磁县"
}, {
value: "130428",
text: "肥乡县"
}, {
value: "130429",
text: "永年县"
}, {
value: "130430",
text: "邱县"
}, {
value: "130431",
text: "鸡泽县"
}, {
value: "130432",
text: "广平县"
}, {
value: "130433",
text: "馆陶县"
}, {
value: "130434",
text: "魏县"
}, {
value: "130435",
text: "曲周县"
}, {
value: "130481",
text: "武安市"
}, {
value: "130482",
text: "其它区"
}]
}]
}]
],
multiIndex: [0, 0, 0]
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
if(e.detail.column != 1) return;
let _index = e.detail.value;
this.setData({
multiArray: [this.data.multiArray[0],this.data.multiArray[0][0].children,this.data.multiArray[0][0].children[_index].children]
})
},
onLoad: function () {
this.setData({
multiArray: [this.data.multiArray[0],this.data.multiArray[0][0].children,this.data.multiArray[0][0].children[0].children]
})
}
})
效果图