Relevant introduction to the three-level linkage of provinces and municipalities in the development of small program components

Rendering:

##Source code

• 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('onLoad...');
          var that = this;
          city.init(that);
      }
  });

• address-temp.wxml

  <?xml version="1.0" encoding="utf-8"?>
  
  <template name="addressPicker"> 
    <view style="display:flex;margin:0;height:100%;align-items: center;justify-content: center"> 
      <view style="width:100%;"> 
        <picker bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{province}}"> 
          <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{province[provinceIndex]}}</view> 
        </picker> 
      </view>  
      <view style="width:100%;"> 
        <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{city}}"> 
          <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{city[cityIndex]}}</view> 
        </picker> 
      </view>  
      <view style="width:100%;"> 
        <picker bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{district}}"> 
          <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{district[districtIndex]}}</view> 
        </picker> 
      </view> 
    </view>
  </template>

##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
  }

The above is the detailed content of Relevant introduction to the three-level linkage of provinces and municipalities in the development of small program components. For more information, please follow other related articles on the PHP Chinese website!