小程序组件开发中的有关省市区三级联动的相关介绍

效果图： 源码

index.wxml

 import src= ../../templates/address-temp / 
 template is= addressPicker 
 data= {{provinceIndex:city.provinceIndex,cityIndex:city.cityIndex,districtIndex:city.districtIndex,province:city.province,
 city:city.city[city.selectedProvince],district:city.district[city.selectedCity]}} / 

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

 ?xml version= 1.0 encoding= utf-8 ? 
 template name= addressPicker 
 view >
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
}
以上就是小程序组件开发中的有关省市区三级联动的相关介绍的详细内容，更多请关注php中文网其它相关文章！
 
  
 最佳 Windows 性能的顶级免费优化软件
 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。