An example Analysis of the three-level interaction of provinces, cities and regions in the Development of Mini Program components

The editor will share with you the example analysis of the three-level linkage of provinces, cities and regions in the development of Mini Program components. I hope you will get something after reading this article. Let's discuss it together.

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

{{province [provinceIndex]}} {{city [cityIndex]}} {{district [districtIndex]}}

City.js

Var city = {province: ['- Please select -', 'Fujian'], city: {'- Please select -': ['- Please select -'], 'Fujian': ['Fuzhou', 'Xiamen', 'Quanzhou']}, district: {'- Please select -: ['- Please select -'] Fuzhou: [Gulou District, Taijiang District], Xiamen City: [Huli District, Jimei District], Quanzhou City: [Jinjiang City, Anxi County]}, provinceIndex: 0, cityIndex: 0, districtIndex: 0, selectedProvince:'- Please select -, selectedCity:'- Please select -' SelectedDistrct:'- Please select -'} 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.districtcity.city.city.city [e.detail.value]] [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.selectedstones] [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} after reading this article, I believe you have a certain understanding of "example Analysis of three-level interaction among provinces, cities and regions in Mini Program component Development". If you want to know more about it, welcome to follow the industry information channel. Thank you for reading!