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

<import></import><template></template>

  var city = require("../../utils/city.js");Page({    data: {},    onLoad: function() {        console.log('onLoad...');        var that = this;        city.init(that);    }});

<?xml  version="1.0" encoding="utf-8"?><template>   <view>     <view>       <picker>         <view>{{province[provinceIndex]}}</view>       </picker>     </view>      <view>       <picker>         <view>{{city[cityIndex]}}</view>       </picker>     </view>      <view>       <picker>         <view>{{district[districtIndex]}}</view>       </picker>     </view>   </view></template>

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}