小程序的picker组件给我们提供了单列、多列、时间、日期、省市区三级联动选择器，用起来非常方便，但有时候无法满足特定的项目需求，所以就需要根据项目需求自己动手实现啦。
项目需求：
供用户选择省市二级联动选择器，并将省份编码、市级编码存入数据库。
与小程序picker组件mode = region的省市区三级联动不同，这里只需要二级，并且需要省份编码、市级编码。
效果示例：
实现思路：
1.首先前端使用小程序多列选择器：mode = multiSelector，由于省市数据不经常修改，将数据库的省市及对应编码生成json直接保存在本地js文件中，避免接口请求，前端可快速渲染。
2.根据省市json数据将省份列表作为一个数组1，根据当前省份获取的城市列表作为另一个数组2，数组1与数组2组合的二维数据即是picker组件range属性值。
关于picker组件多列选择器属性说明如下：
wxml：
{{provinceCityArray[0][multiIndex[0]].area_name}}-{{provinceCityArray[1][multiIndex[1]].area_name}}
js：
/**
* 页面的初始数据
*/
var provinceCity = require("../../../common/ProvinceCityJson.js")
Page({
data: {
province_code:"",
city_code:"",
provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],//默认北京
multiIndex: [0, 0],
},
/**
* 省市回调函数
*/
areaPickerChange: function(e) {
this.setData({
multiIndex: e.detail.value,
province_code: this.data.provinceCityArray[0][e.detail.value[0]].area_code,
city_code: this.data.provinceCityArray[1][e.detail.value[1]].area_code
})
console.log("选择结束:" + this.data.multiIndex + ";province_code:" + this.data.province_code + ";city_code:" + this.data.city_code)
},
/**
* 省市切换改变使触发函数，为市级列表赋值
*/
areaPickerColumnChange: function(e) {
var data = {
provinceCityArray: this.data.provinceCityArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
var areaCode = data.provinceCityArray[0][e.detail.value].area_code;
switch (e.detail.column) {
case 0:
//切换省份时为第二列市级列表赋值并默认选中第一个
data.provinceCityArray[1] = provinceCity.getCityListByProvince(areaCode);
data.multiIndex[1] = 0;
break;
}
this.setData(data);
}
})
注意事项：
选择器切换函数的返回参数e.detail.value获取的是下标，而我们想要的是数组的数据，这时候使用data.provinceCityArray[0][e.detail.value].area_code，这样就可以直接获取所选择的编码了
省市及编码本地json：ProvinceCityJson.js
var provinceCity = [{
"area_code": "110000",
"area_name": "北京市",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "120000",
"area_name": "天津市",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "130000",
"area_name": "河北省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "140000",
"area_name": "山西省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "150000",
"area_name": "内蒙古自治区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "210000",
"area_name": "辽宁省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "220000",
"area_name": "吉林省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "230000",
"area_name": "黑龙江省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "310000",
"area_name": "上海市",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "320000",
"area_name": "江苏省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "330000",
"area_name": "浙江省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "340000",
"area_name": "安徽省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "350000",
"area_name": "福建省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "360000",
"area_name": "江西省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "370000",
"area_name": "山东省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "410000",
"area_name": "河南省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "420000",
"area_name": "湖北省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "430000",
"area_name": "湖南省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "440000",
"area_name": "广东省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "450000",
"area_name": "广西壮族自治区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "460000",
"area_name": "海南省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "500000",
"area_name": "重庆市",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "510000",
"area_name": "四川省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "520000",
"area_name": "贵州省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "530000",
"area_name": "云南省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "540000",
"area_name": "西藏自治区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "610000",
"area_name": "陕西省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "620000",
"area_name": "甘肃省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "630000",
"area_name": "青海省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "640000",
"area_name": "宁夏回族自治区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "650000",
"area_name": "新疆维吾尔自治区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "710000",
"area_name": "台湾省",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "810000",
"area_name": "香港特别行政区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "820000",
"area_name": "澳门特别行政区",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "990000",
"area_name": "其他",
"depth": 1,
"parent_code": "1"
},
{
"area_code": "110100",
"area_name": "市辖区",
"depth": 2,
"parent_code": "110000"
},
{
"area_code": "110200",
"area_name": "县",
"depth": 2,
"parent_code": "110000"
},
{
"area_code": "120100",
"area_name": "市辖区",
"depth": 2,
"parent_code": "120000"
},
{
"area_code": "120200",
"area_name": "县",
"depth": 2,
"parent_code": "120000"
},
{
"area_code": "130100",
"area_name": "石家庄市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130200",
"area_name": "唐山市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130300",
"area_name": "秦皇岛市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130400",
"area_name": "邯郸市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130500",
"area_name": "邢台市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130600",
"area_name": "保定市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130700",
"area_name": "张家口市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130800",
"area_name": "承德市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "130900",
"area_name": "沧州市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "131000",
"area_name": "廊坊市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "131100",
"area_name": "衡水市",
"depth": 2,
"parent_code": "130000"
},
{
"area_code": "140100",
"area_name": "太原市",
"depth": 2,
"parent_code": "140000"
}
]
/**
* 获取省份
*/
function getProvinceList() {
var array = []
for (var key in provinceCity) {
if (provinceCity[key].depth == 1) {
array.push(provinceCity[key])
}
}
return array
}
/*导出方法 */
module.exports = {
getProvinceList: getProvinceList(),
getCityListByProvince: function (province) {
var array = []
for (var key in provinceCity) {
if (provinceCity[key].depth == 2 && provinceCity[key].parent_code == province) {
array.push(provinceCity[key])
}
}
return array
},
provinceCity: provinceCity
}
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe