运用小程序实现 省市区三级联动

// wxml 部分代码如下

< view class= "list">

< view class= 'list-left'>地区： </ view >

< view bindtap= 'showPicker' class= "list-right {{flag ? '' : 'placeholder'}}">

< block wx:if= "{{flag}}">

{{provinceName[provinceIndex]}}

{{cityName[cityIndex]}}

{{countyName[countyIndex]}}

</ block >

< block wx:else >请选择所在地区 </ block >

</ view >

</ view >

<!-- <input value='{{provinceName[provinceIndex]}} {{cityName[cityIndex]} {{countyName[countyIndex]}}'></input> -->

< button disabled= '{{!flag}}' type= 'primary'>提 交 </ button >

< view class= 'picker' hidden= '{{show}}'>

< view class= 'btn-group'>

< view bindtap= 'cancel'>取消 </ view >

< view bindtap= 'sure'>确定 </ view >

</ view >

< picker-view bindchange= "pickderChange">

< picker-view-column >

< view wx:for= "{{provinceName}}" class= 'item'>{{item}} </ view >

</ picker-view-column >

< picker-view-column >

< view wx:for= "{{cityName}}" class= 'item'>{{item}} </ view >

</ picker-view-column >

< picker-view-column >

< view wx:for= "{{countyName}}" class= 'item'>{{item}} </ view >

</ picker-view-column >

</ picker-view >

</ view >

< view class= 'mask' bindtap= 'cancel' hidden= '{{show}}'></ view >

// wxss 部分代码如下---------------------------------

page{

background: #f7f7f7;

}

.list{

display: flex;

background: #fff;

padding: 20 rpx 40 rpx;

}

.list-left{

width: 120 rpx;

}

.list-right{

flex: 1;

}

button{

margin-top: 200 rpx;

width: 700 rpx;

}

.placeholder{

color: #ccc;

}

picker-view{

height: 560 rpx;

width: 750 rpx;

}

.picker{

z-index: 1;

position: fixed;

bottom: 0;

left: 0;

width: 750 rpx;

height: 560 rpx;

display: flex;

background: #fff;

flex-wrap: wrap;

justify-content: center;

}

.btn-group{

display: flex;

justify-content: space-between;

width: 750 rpx;

padding: 0 43 rpx;

height: 80 rpx;

line-height: 80 rpx;

background: skyblue;

}

.item{

line-height: 40 rpx;

text-align: center;

}

.mask{

position: fixed;

top: 0;

left: 0;

width: 750 rpx;

height: 100%;

background: rgba( 0, 0, 0, .4 );

}

wxjs 部分代码如下----------------------------------------------

// 引用省市区三级联动js资源，base/data/source.js，暂时没有

var source = require( '../../base/data/source.js');

Page({

data: {

flag: false,

show: true,

// 省级

provinceName: [], // 省名称

provinceCode: [], // 省编号

provinceIndex: '', // 省序号

// 市级

cityName: [], // 市名称

cityCode: [], // 市编号

cityIndex: '', // 市序号

// 区级

countyName: [], // 区名称

countyCode: [], // 区编号

countyIndex: '', // 区序号

// 下标

pro: 0,

cit: 0,

cou: 0,

},

// 加载数据

onLoad: function(){

this.setSource(); // 调用下面的 setSource方法

},

// 获取省市区的数据

setSource: function(pro,cit,cou){

var pro = pro || 0;

var cit = cit || 0;

var cou = cou || 0;

// ---------------省份的对象

var province = source[ '100000'] // 获取上面引用的所有省份作为数组

var provinceName = [];

var provinceCode = [];

// 根据省份编号遍历省份对象的编号和名称到对应的数组中

for ( var item in province){

provinceCode.push(item); // 省编号

provinceName.push(province[item]); // 省名称

}

// 把数组返回到前端

this.setData({

provinceName: provinceName,

provinceCode: provinceCode

});

// ---------------市的对象

var city = source[provinceCode[pro]]; // 根据省份的序号，获取该省的所有市作为数组对象

var cityName = [];

var cityCode = [];

// 根据市的编号遍历市对象的编号和名称到对应的数组中

for( var item in city){

cityCode.push(item); // 市编号

cityName.push(city[item]); // 市名称

}

// 把数组返回到前端

this.setData({

cityCode: cityCode,

cityName: cityName

});

// ---------------区的对象

var county = source[cityCode[cit]]; // 根据市的序号，获取该市的所有区作为数组对象

var countyCode = [];

var countyName = [];

// 根据区的编号遍历区对象的编号和名称到对应的数组中

for( var item in county){

countyCode.push(item); // 区编号

countyName.push(county[item]); // 区名称

}

// 把数组返回到前端

this.setData({

countyCode: countyCode,

countyName: countyName

});

},

// 控制选择区域的显示和隐藏

showPicker: function(){

this.setData({

show: false

});

},

// 取消时，则隐藏选择区域

cancel: function(){

this.setData({

show: true

});

},

// 控制 省，市，区 随上级改变而改变

pickderChange: function(e){

var pro = e.detail.value[ 0];

var cit = e.detail.value[ 1];

var cou = e.detail.value[ 2];

this.setSource(pro,cit,cou);

this.setData({

pro: pro,

cit: cit,

cou: cou

})

},

// 确定时，把选择的数据返回并设置到地区区域，同时也隐藏选择区域

sure: function(){

this.setData({

provinceIndex: this.data.pro,

cityIndex: this.data.cit,

countyIndex: this.data.cou,

flag: true

})

// 调用取消方法，隐藏选择区域

this.cancel();

}

})