微信小程序省市二级联动picke

**

微信小程序省市二级联动picker

**
微信小程序官方文档上的的picker是省市区三级联动，有时我们只需要二级联动，这就需要我们自己作修改，之前在网上也查找了很多资料，省市数据都不太完善，今天做了一个相对完善的版本，话不多说，上代码
wxml代码：在这里插入代 <view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{ {multiIndex}}" range="{ {multiArray}}"> <view class="picker"> <view class="mui-table-view-cell" id="location"> <view class="mui-navigate-right"> 所在城市 <view class="mui-pull-right" id="location_text"> <text style="margin-right:30px;">{ {city}} </text> <text>></text> </view> </view> </view> </view> </picker> </view> </view> </view> 码片
js：`date数据： multiIndex: [0, 0],
multiArray: [],
city:‘浙江省 杭州市’,//存储选择的城市在
//选择城市
bindMultiPickerChange: function (e) {
var that = this
var selectDate = that.data.multiArray[0][e.detail.value[0]] + ’ ’ + that.data.multiArray[1][e.detail.value[1]]
that.setData({
“multiIndex[0]”: e.detail.value[0],
“multiIndex[1]”: e.detail.value[1],
city:selectDate

})

},
bindMultiPickerColumnChange: function(e) {
var that = this
var data = cityData[e.detail.value].children
switch (e.detail.column) {
case 0:
list = []
for (var i = 0; i < data.length; i++) {
list.push(data[i].text)
}
that.setData({
“multiArray[1]”: list,
“multiIndex[0]”: e.detail.value,
“multiIndex[1]”: 0
})
}
},
城市数据包：`const cityData = [{
value: ‘浙江省’,
text: ‘浙江省’,
children: [{
value: “杭州市”,
text: “杭州市”
}, {
value: “宁波市”,
text: “宁波市”
}, {
value: “温州市”,
text: “温州市”
}, {
value: “嘉兴市”,
text: “嘉兴市”
}, {
value: “湖州市”,
text: “湖州市”
}, {
value: “绍兴市”,
text: “绍兴市”
}, {
value: “金华市”,
text: “金华市”
}, {
value: “衢州市”,
text: “衢州市”
}, {
value: “舟山市”,
text: “舟山市”
}, {
value: “台州市”,
text: “台州市”
}, {
value: “丽水市”,
text: “丽水市”
}]
}, {
value: ‘北京市’,
text: ‘北京市’,
children: [{
value: “东城区”,
text: “东城区”
}, {
value: “西城区”,
text: “西城区”
}, {
value: “崇文区”,
text: “崇文区”
}, {
value: “宣武区”,
text: “宣武区”
}, {
value: “朝阳区”,
text: “朝阳区”
}, {
value: “丰台区”,
text: “丰台区”
}, {
value: “石景山区”,
text: “石景山区”
}, {
value: “海淀区”,
text: “海淀区”
}, {
value: “门头沟区”,
text: “门头沟区”
}, {
value: “房山区”,
text: “房山区”
}, {
value: “通州区”,
text: “通州区”
}, {
value: “顺义区”,
text: “顺义区”
}, {
value: “110114”,
text: “昌平区”
}, {
value: “大兴区”,
text: “大兴区”
}, {
value: “怀柔区”,
text: “怀柔区”
}, {
value: “平谷区”,
text: “平谷区”
}, {
value: “密云县”,
text: “密云县”
}, {
value: “延庆县”,
text: “延庆县”
}, {
value: “其它区”,
text: “其它区”
}]
}, {
value: ‘天津市’,
text: ‘天津市’,
children: [{
value: “和平区”,
text: “和平区”
}, {
value: “河东区”,
text: “河东区”
}, {
value: “河西区”,
text: “河西区”
}, {
value: “南开区”,
text: “南开区”
}, {
value: “河北区”,
text: “河北区”
}, {
value: “红桥区”,
text: “红桥区”
}, {
value: “塘沽区”,
text: “塘沽区”
}, {
value: “汉沽区”,
text: “汉沽区”
}, {
value: “大港区”,
text: “大港区”
}, {
value: “东丽区”,
text: “东丽区”
}, {
value: “西青区”,
text: “西青区”
}, {
value: “津南区”,
text: “津南区”
}, {
value: “北辰区”,
text: “北辰区”
}, {
value: “武清区”,
text: “武清区”
}, {
value: “宝坻区”,
text: “宝坻区”
}, {
value: “滨海新区”,
text: “滨海新区”
}, {
value: “宁河县”,
text: “宁河县”
}, {
value: “静海县”,
text: “静海县”
}, {
value: “蓟县”,
text: “蓟县”
}, {
value: “其它区”,
text: “其它区”
}]
}, {
value: ‘河北省’,
text: ‘河北省’,
children: [{
value: “石家庄市”,
text: “石家庄市”
}, {
value: “唐山市”,
text: “唐山市”
}, {
value: “秦皇岛市”,
text: “秦皇岛市”
}, {
value: “邯郸市”,
text: “邯郸市”
}, {
value: “邢台市”,
text: “邢台市”
}, {
value: “保定市”,
text: “保定市”
}, {
value: “张家口市”,
text: “张家口市”
}, {
value: “承德市”,
text: “承德市”
}, {
value: “沧州市”,
text: “沧州市”
}, {
value: “廊坊市”,
text: “廊坊市”
}, {
value: “衡水市”,
text: “衡水市”
}]
}, {
value: ‘山西省’,
text: ‘山西省’,
children: [{
value: “太原市”,
text: “太原市”
}, {
value: “大同市”,
text: “大同市”
}, {
value: “阳泉市”,
text: “阳泉市”
}, {
value: “长治市”,
text: “长治市”
}, {
value: “晋城市”,
text: “晋城市”
}, {
value: “朔州市”,
text: “朔州市”
}, {
value: “晋中市”,
text: “晋中市”
}, {
value: “运城市”,
text: “运城市”
}, {
value: “忻州市”,
text: “忻州市”
}, {
value: “临汾市”,
text: “临汾市”
}, {
value: “吕梁市”,
text: “吕梁市”
}]
}, {
value: ‘内蒙古’,
text: ‘内蒙古’,
children: [{
value: “呼和浩特市”,
text: “呼和浩特市”