省市区组件json代码
https://github.com/aliang2418/woshinib/blob/master/fils
小程序组件js代码
var jsonData = require('../json/cityCode.js');
function init(){
var cityArray = [
[],
[],
[],
];
for (let i = 0, len = jsonData.citylist.length; i < len; i++) {
//获取省级数据
let province = jsonData.citylist[i];
let pObject = {
id: province.p_code,
name: province.p_name
}
//赋值第一个数组 省级数据
cityArray[0].push(pObject);
}
// 默认北京市 市辖区
//市级数据
let city = jsonData.citylist[0].s;
for (let j = 0; j < city.length; j++) {
let cObject = {
id: city[j].s_code,
name: city[j].s_name
}
//赋值第二个数组 市级数据
cityArray[1].push(cObject);
//区级数据
}
let region = city[0].c;
for (let k = 0; k < region.length; k++) {
let rObject = {
id: region[k].c_code,
name: region[k].c_name
}
// 赋值区级数据
cityArray[2].push(rObject);
}
return cityArray;
}
function changeCloumt(cityArray,index,column,province_index){
if (column == 0) {
cityArray[1] = [];
cityArray[2] = [];
//第一列切换
let city = jsonData.citylist[index].s;
for (let j = 0; j < city.length; j++) {
let cObject = {
id: city[j].s_code,
name: city[j].s_name
}
//赋值第二个数组 市级数据
cityArray[1].push(cObject);
//区级数据
}
let region = city[0].c;
for (let k = 0; k < region.length; k++) {
let rObject = {
id: region[k].c_code,
name: region[k].c_name
}
// 赋值区级数据
cityArray[2].push(rObject);
}
return cityArray;
}
if (column == 1) {
//第二列切换
cityArray[2] = [];
let province = cityArray[0][province_index];
for (let i = 0, len = jsonData.citylist.length; i < len; i++) {
let p = jsonData.citylist[i];
if (province.id == p.p_code) {
province = p;
}
}
//获取已存在的省市区
let city = province.s;
let region = city[index].c;
for (let k = 0; k < region.length; k++) {
let rObject = {
id: region[k].c_code,
name: region[k].c_name
}
// 赋值区级数据
cityArray[2].push(rObject);
}
return cityArray;
}
}
function getCityCode(array){
let arrayText = [];
let p = array[0];
let c = array[1];
let r = array[2];
let city;
for (let i = 0, len = jsonData.citylist.length; i < len; i++) {
let province = jsonData.citylist[i];
if (p == province.p_code) {
city = province.s;
arrayText[0] = province.p_name;
}
}
let region;
for(let j = 0; j < city.length; j++){
if(c == city[j].s_code){
region = city[j].c;
arrayText[1] = city[j].s_name
}
}
for(let k = 0; k < region.length; k++){
if(r == region[k].c_code){
arrayText[2] = region[k].c_name
}
}
return arrayText;
}
function getCityIndex(cityArray,array){
let arrayText = [];
let p = array[0];
let c = array[1];
let r = array[2];
arrayText[0] = cityArray[0][p];
arrayText[1] = cityArray[1][c];
arrayText[2] = cityArray[2][r];
return arrayText;
}
module.exports = {
getCityCode: getCityCode,
init: init,
changeCloumt:changeCloumt,
getCityIndex:getCityIndex
}
其他页面在头部引入
var cityUtil = require("../../utils/city");
在onload中添加
onLoad: function (options) {
this.setData({
cityArray:cityUtil.init()
})
}
其他事件
func_changeCitysChange(e){
console.log(e);
let array = cityUtil.getCityIndex(this.data.cityArray,e.detail.value);
this.setData({
region:[array[0].name,array[1].name,array[2].name],
region_code:[array[0].id,array[1].id,array[2].id],
citysIndex:e.detail.value
})
},
changeCitysChangeColumn(e){
console.log(e);
let column = e.detail.column;
let index = e.detail.value;
if(column == 0 ){
this.setData({
province_index:index,
cityArray:cityUtil.changeCloumt(this.data.cityArray,index,column)
})
}
if(column == 1){
this.setData({
cityArray:cityUtil.changeCloumt(this.data.cityArray,index,column,this.data.province_index)
})
}
},
wxml代码
<picker class="from-input" mode="multiSelector" bindchange="func_changeCitysChange" bindcolumnchange="changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}" range-key="name">
<view>{{region[0]}}{{region[1]}}{{region[2]}}</view>
<view class="picker" wx:if="{{region.length == 0}}">请选择省市区</view>
</picker>