一,自定义三级联动
数组
{"sheng": "598", "di": "0", "xian": "0", "name": "安徽", "level":1},{"sheng": "598", "di": "1011", "xian": "0", "name": "安庆", "level":2},{"sheng": "598", "di": "1011", "xian": "14", "name": "怀宁县", "level":3},{"sheng": "598", "di": "1011", "xian": "15", "name": "潜山县", "level":3}
js
data: {
citysIndex: [0, 0, 0], //给一个初始值索引,因为有三列,所以3个0
},
func_changeCitysChange: function (e) {
var that = this;
var cityArray = that.data.cityArray;
var citykey = that.data.citykey;
var address = '';
if (that.data.ssq == undefined) {
//下面方法中没有设置ssq,应该给它默认值 ,此时citysIndex相当于[0,0,0]
var citysIndex = that.data.citysIndex;
for (let i in citysIndex) {
address += (cityArray[i][citysIndex[i]] + '-')
}
} else {
address = that.data.ssq;
}
address = address.substr(0, address.length - 1);//去掉最后一个字符
this.setData({
address: address
})
console.log('确认选择', citykey)
},
func_changeCitysChangeColumn: function (e) {
var that = this;
var cityArray = that.data.cityArray;
var arrays = that.data.arrays;
var list1 = []; //存放第二列数据,即市的列
var list2 = []; //存放第三列数据,即区的列
var citysIndex = [];//数组索引
var sheng;
var di;
var xian;
//注意地址文件中的字段关系,省、市、区关联的字段有 sheng、di、level。
//var sheng var di;arrays[i]['sheng'] == sheng,arrays[i]['di'] == di 这些都是为了首次加载给他赋默认值arr[0][0]
switch (e.detail.column) {
case 0:
//滑动左列
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
sheng = arrays[i]['sheng'];
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
di = arrays[i]['di'];
list1.push(arrays[i]['name']);
}
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
xian = arrays[i]['xian'];
list2.push(arrays[i]['name']);
}
}
citysIndex = [e.detail.value, 0, 0];
var ssq = cityArray[0][e.detail.value] + '-' + list1[0] + '-' + list2[0] + '';
that.setData({
global_sheng: sheng,
global_di: di
});
break;
case 1:
//滑动中列
sheng = that.data.global_sheng == undefined ? arrays[0]['sheng'] : that.data.global_sheng;//首次加载,直接拉中间列,是没有sheng这个值
list1 = cityArray[1];
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
di = arrays[i]['di'];
}
}
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
xian = arrays[i]['xian'];
list2.push(arrays[i]['name']);
}
}
citysIndex = [that.data.citysIndex[0], e.detail.value, 0];
var ssq = cityArray[0][that.data.citysIndex[0]] + '-' + list1[e.detail.value] + '-' + list2[0] + '';
that.setData({
global_di: di
});
break;
case 2:
sheng = that.data.global_sheng == undefined ? arrays[0]['sheng'] : that.data.global_sheng;
di = that.data.global_sheng == undefined ? arrays[1]['di'] : that.data.global_di;
//滑动右列
list1 = cityArray[1];
list2 = cityArray[2];
for (let i = 0, len = arrays.length; i < len; i++) {
if (arrays[i]['name'] == cityArray[2][e.detail.value]) {
xian = arrays[i]['xian'];
}
}
citysIndex = [that.data.citysIndex[0], that.data.citysIndex[1], e.detail.value];
var ssq = cityArray[0][that.data.citysIndex[0]] + '-' + list1[that.data.citysIndex[1]] + '-' + list2[e.detail.value] + '';
break;
}
var citykey = [sheng, di, xian];
that.setData({
"cityArray[1]": list1,//重新赋值中列数组,即联动了市
"cityArray[2]": list2,//重新赋值右列数组,即联动了区
citysIndex: citysIndex,//更新索引
ssq: ssq,//获取选中的省市区
citykey: citykey
});
//console.log('picker发送选择改变,携带值为', citykey)
},
wxml
<picker name="comp_work_pcp" mode="multiSelector" bindchange="func_changeCitysChange" bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray}}">
<view class="picker">
{{address?address:'请选择'}}
</view>
</picker>