index.wxml
index.js
var city = require("../../utils/city.js");
Page({
data: {},
onLoad: function() {
console.log(&＃39;onLoad...&＃39;);
var that = this;
city.init(that);
}
});address-temp.wxml
{{province[provinceIndex]}} {{city[cityIndex]}} {{district[districtIndex]}}
city.js
var city = {
province: [&＃39;-请选择-&＃39;, &＃39;福建省&＃39;],
city: {
&＃39;-请选择-&＃39;: [&＃39;-请选择-&＃39;],
&＃39;福建省&＃39;: [&＃39;福州市&＃39;, &＃39;厦门市&＃39;, &＃39;泉州市&＃39;]
},
district: {
&＃39;-请选择-&＃39;: [&＃39;-请选择-&＃39;],
&＃39;福州市&＃39;: [&＃39;鼓楼区&＃39;, &＃39;台江区&＃39;],
&＃39;厦门市&＃39;: [&＃39;湖里区&＃39;, &＃39;集美区&＃39;],
&＃39;泉州市&＃39;: [&＃39;晋江市&＃39;, &＃39;安溪县&＃39;]
},
provinceIndex: 0,
cityIndex: 0,
districtIndex: 0,
selectedProvince: &＃39;-请选择-&＃39;,
selectedCity: &＃39;-请选择-&＃39;,
selectedDistrct: &＃39;-请选择-&＃39;
};
function init(that) {
that.setData({
&＃39;city&＃39;: city
});
var bindProvinceChange = function(e) {
var city = that.data.city;
that.setData({
&＃39;city.provinceIndex&＃39;: e.detail.value,
&＃39;city.selectedProvince&＃39;: city.province[e.detail.value],
&＃39;city.selectedCity&＃39;: city.city[city.province[e.detail.value]][0],
&＃39;city.selectedDistrct&＃39;: city.district[city.city[city.province[e.detail.value]][0]][0],
&＃39;city.cityIndex&＃39;: 0,
&＃39;city.districtIndex&＃39;: 0
});
};
var bindCityChange = function(e) {
var city = that.data.city;
that.setData({
&＃39;city.cityIndex&＃39;: e.detail.value,
&＃39;city.selectedCity&＃39;: city.city[city.selectedProvince][e.detail.value],
&＃39;city.districtIndex&＃39;: 0,
&＃39;city.selectedDistrct&＃39;: city.district[city.city[city.selectedProvince][e.detail.value]][0]
});
};
var bindDistrictChange = function(e) {
var city = that.data.city;
that.setData({
&＃39;city.districtIndex&＃39;: e.detail.value,
&＃39;city.selectedDistrct&＃39;: city.district[city.selectedCity][e.detail.value]
});
};
that[&＃39;bindProvinceChange&＃39;] = bindProvinceChange;
that[&＃39;bindCityChange&＃39;] = bindCityChange;
that[&＃39;bindDistrictChange&＃39;] = bindDistrictChange;
}
module.exports = {
init: init
}以上就是小程序组件开发中的有关省市区三级联动的相关介绍的详细内容，更多请关注其它相关文章！
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有