微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动

微信小程序的省市区三级联动需要使用到的是Picker多列选择器，参考文档：https://www.w3cschool.cn/weix...，

案例中用到的省市区的json文件在文后发出出来。

废话不多说，来看看具体地实现吧。

视图view

bindchange="func_changeCitysChange"

bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}">

请选择

JS代码

var arrays = common.getAreaInfo();//在头部引入 省市区地址js,这里封装成了方法了。

data：

data: {

citysIndex: [0, 0, 0], //给一个初始值索引，因为有三列，所以3个0

},

onLoad：

onLoad: function(options) {

var that = this;

if (wx.getStorageSync('global_cityData')) {

var cityArray = wx.getStorageSync('global_cityData');

} else {

//定义三列空数组

var cityArray = [

[],

[],

[],

];

for (let i = 0, len = arrays.length; i < len; i++) {

switch (arrays[i]['level']) {

case 1:

//第一列

cityArray[0].push(arrays[i]["name"]);

break;

case 2:

//第二列(默认由第一列第一个关联)

if (arrays[i]['sheng'] == arrays[0]['sheng']) {

cityArray[1].push(arrays[i]["name"]);

}

break;

case 3:

//第三列(默认第一列第一个、第二列第一个关联)

if (arrays[i]['sheng'] == arrays[0]['sheng'] && arrays[i]['di'] == arrays[1]['di']) {

cityArray[2].push(arrays[i]["name"]);

}

break;

}

}

wx.setStorageSync('global_cityData', cityArray);

}

that.setData({

cityArray: cityArray

});

},

下面就是两个事件了

func_changeCitysChange: function(e) {

var that = this;

var cityArray = that.data.cityArray;

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;

}

wx.showModal({

title: '',

content: address+'',

})

},

func_changeCitysChangeColumn: function(e) {

var that = this;

var cityArray = that.data.cityArray;

var list1 = []; //存放第二列数据，即市的列

var list2 = []; //存放第三列数据，即区的列

var citysIndex = [];

//主要是注意地址文件中的字段关系，省、市、区关联的字段有 sheng、di、level

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]) {

var sheng = arrays[i]['sheng'];

}

if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {

list1.push(arrays[i]['name']);

}

if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == arrays[1]['di']) {

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

});

break;

case 1:

//滑动中列

var di;

var sheng = that.data.global_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) {

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] + '';

break;

case 2:

//滑动右列

list1 = cityArray[1];

list2 = cityArray[2];

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;

}

that.setData({

"cityArray[1]": list1,//重新赋值中列数组，即联动了市

"cityArray[2]": list2,//重新赋值右列数组，即联动了区

citysIndex: citysIndex,//更新索引

ssq: ssq,//获取选中的省市区

});

},

用到的省市区js文件，点下面链接。

图片示例