小程序picker组件写城市两级联动
<view class="section">
<view class="section__title">省市二级联动demo</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
</view>
// pcity/pcity.js
var that
var list = []
var base_url = "https://XXX.com"
Page({
/**
* 页面的初始数据
*/
data: {
multiIndex:[0,0],
multiArray: [['北京', '安徽', "福建", "甘肃", "广东", "广西", "贵州", "海南", "河北", "河南", "黑龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏", "青海", "山东", "山西", "陕西", "上海", "四川", "天津", "西藏", "新疆", "云南", "浙江", "重庆", "香港", "澳门", "台湾"], ['北京']],
objectMultiArray:[]
},
onLoad: function(){
that = this
wx.request({
url: base_url + '/index/getoptions',
method: "get",
header: {
'content-type': 'application/json', // 默认值
},
success:res =>{
this.setData({
objectMultiArray:res.data.data.area
})
},
fail(res){
console.log('失败'+res)
},
})
},
bindMultiPickerChange: function(e){
console.log(e)
that.setData({
"multiIndex[0]": e.detail.value[0],
"multiIndex[1]": e.detail.value[1]
})
},
bindMultiPickerColumnChange: function (e){
switch (e.detail.column){
case 0:
list = []
for (var i = 0; i < that.data.objectMultiArray.length;i++){
if (that.data.objectMultiArray[i].upid == that.data.objectMultiArray[e.detail.value].id){
list.push(that.data.objectMultiArray[i].name)
}
}
that.setData({
"multiArray[1]": list,
"multiIndex[0]": e.detail.value,
"multiIndex[1]" : 0
})
}
}
})
