小程序组件之省市区三级联动

效果图：

源码

• 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

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

实例下载：

• 【Coding】微信小程序之省市区三级联动实例源码