![小程序组件开发中的有关省市区三级联动的相关介绍]()
效果图：
![小程序组件开发中的有关省市区三级联动的相关介绍]()
源码
index.wxml
index.js
var city = require("../../utils/city.js");
Page({
data: {},
onLoad: function() {
console.log('onLoad...');
var that = this;
city.init(that);
}
});address-temp.wxml
沙之丘企业网站程序3.5下载沙之丘企业网站程序是一个以asp.net(C#) 4.0 +access进行开发的企业网站源码。主要功能：1、产品、设备、新闻系统2、留言信息直接发邮件到相关部门3、所有链接都以一级目录显示更好的权重4、其他信息扩展，可以增加如：人事招聘，公司介绍，地图，联系我们等5、带有商品和设备的搜索功能6、模板动态化方便扩展模板7、简体繁体选择显示运行环境：windows 2003或者更高windows服务
{{province[provinceIndex]}} {{city[cityIndex]}} {{district[districtIndex]}}
city.js
var city = {
province: ['-请选择-', '福建省'],
city: {
'-请选择-': ['-请选择-'],
'福建省': ['福州市', '厦门市', '泉州市']
},
district: {
'-请选择-': ['-请选择-'],
'福州市': ['鼓楼区', '台江区'],
'厦门市': ['湖里区', '集美区'],
'泉州市': ['晋江市', '安溪县']
},
provinceIndex: 0,
cityIndex: 0,
districtIndex: 0,
selectedProvince: '-请选择-',
selectedCity: '-请选择-',
selectedDistrct: '-请选择-'
};
function init(that) {
that.setData({
'city': city
});
var bindProvinceChange = function(e) {
var city = that.data.city;
that.setData({
'city.provinceIndex': e.detail.value,
'city.selectedProvince': city.province[e.detail.value],
'city.selectedCity': city.city[city.province[e.detail.value]][0],
'city.selectedDistrct': city.district[city.city[city.province[e.detail.value]][0]][0],
'city.cityIndex': 0,
'city.districtIndex': 0
});
};
var bindCityChange = function(e) {
var city = that.data.city;
that.setData({
'city.cityIndex': e.detail.value,
'city.selectedCity': city.city[city.selectedProvince][e.detail.value],
'city.districtIndex': 0,
'city.selectedDistrct': city.district[city.city[city.selectedProvince][e.detail.value]][0]
});
};
var bindDistrictChange = function(e) {
var city = that.data.city;
that.setData({
'city.districtIndex': e.detail.value,
'city.selectedDistrct': city.district[city.selectedCity][e.detail.value]
});
};
that['bindProvinceChange'] = bindProvinceChange;
that['bindCityChange'] = bindCityChange;
that['bindDistrictChange'] = bindDistrictChange;
}
module.exports = {
init: init
} 
