省市区三级联动，踩过的坑

一.  后台系统三级联动

事件就是调取省市区三级json

    //获取省市区信息
    getAreaList = () => {
        const { dispatch } = this.props;
        dispatch({
            type: 'XXXXXX',//接口地址
            callback: res => {
                const { code, data, msg } = res;
                if (code !== 200) {
                    message.error(msg);
                    return;
                }
                this.setState({
                    areaList: data,
                });
            },
        });
    }

1.使用ant designUI框架:

<Cascader placeholder="省/市/区" allowClear={false} options={areaList} />

一行代码搞定

2.手写一个三个下拉框分开的

react：样式用了一些ant design组件，不过主体就是三个下拉框，Select和Option

              <Col span={8}>
                <FormItem label="门店地址"  required={false}>
                  {getFieldDecorator('firstCate', {
                    initialValue: null
                  })(
                    <Select
                    showSearch={true}
                    placeholder="全部"
                    optionFilterProp="children"
                    onChange={this.getCity}
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    <Option value={null} >全部</Option>
                    {this.state.capitals.map((item) =>{
                      return(
                        <Option key={item.label} value={item.value} >{item.label}</Option>
                      )
                   })}
                  </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem style={{ 'marginTop': '28.8px' }} required={false}>
                  {getFieldDecorator('secondCate', {
                    initialValue: null
                  })(
                    <Select
                    placeholder="全部"
                    optionFilterProp="children"
                    onChange={this.getSreaList}
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    <Option value={null} >全部</Option>
                    {this.state.city.map(item=>{
                    return(
                      <Option key={item.label} value={item.value} >{item.label}</Option>
                    )
                  })}
                  </Select>
                )}
                  </FormItem>
              </Col>
              <Col span={8}>
                <FormItem style={{ 'marginTop': '28.8px' }} required={false}>
                  {getFieldDecorator('thirdCate', {
                    initialValue: null
                  })(
                    <Select
                    placeholder="全部"
                    onChange={this.getData}
                  >
                    <Option value={null} >全部</Option>
                      {this.state.areaList.map(item=>{
                    return(
                      <Option key={item.label} value={item.value} >{item.label}</Option>
                    )
                  })}
                  </Select>
                )}
                  </FormItem>
              </Col>

点击省市区下拉选择事件 

    getCity=(key)=>{
      const {capitals} = this.state;
      let da=[];
      capitals.map(item=>{
        if(item.value === key){
          da=item.children
        }
      })
      this.setState({
        city:da,

      })
      this.props.form.resetFields(['secondCate']);
      this.props.form.resetFields(['thirdCate']);
    }
    getSreaList=(key)=>{
      const {city} = this.state;
      let ci =[];
      city.map(item=>{
        if(item.value === key){
          ci = item.children
        }
      })
      this.setState({
        areaList:ci,
      })
      this.props.form.resetFields(['thirdCate']);
    }

实现效果

附带一份省市区json地址//download.csdn.net/download/qq_41575586/12010244

二.小程序三级联动 

小程序的三级联动一般ui组件都有

没有办法才会自己写事件

.wxml

          <view class="qy quyu-left">
          <view class="title">全部城市</view>
            <view class="{{select1 == item.cityId ? 'current fontFamilySC500' : ''}} childItem" wx:for="{{cityleft}}" wx:key="" bindtap="selectleft" data-city='{{index}}' data-id="{{item.cityId}}">
              {{item.cityName}}
            </view>
          </view>
          <view class="qy quyu-center">
          <view class="title">全部区域</view>
            <view class="{{select2 == item.areaId ? 'current2 fontFamilySC500' : ''}} childItem" wx:for="{{citycenter}}" wx:key="" bindtap="selectcenter" data-city='{{index}}' data-id="{{item.areaId}}">
              {{item.areaName}}
            </view>
          </view>
          <view class="qy quyu-right">
          <view class="title" style="color: #333333;">全部门店</view>
            <view wx:for="{{cityright2}}" class="{{select3 == item.storeId?'current3 fontFamilySC500':''}} childItem" wx:key="" bindtap='selectright' data-city="{{index}}" data-storename="{{item.storeName}}" data-id="{{item.storeId}}">
              <label>{{item.storeName}}</label>
            </view>
          </view>

.js 

主要是触发拿到下一级数据显示

  //获取可选城市列表
//调用接口获取三级联动地址
  getLocate: function (e) {
    var _this = this;
    store.getLocate().then(res => {//此处为所调用接口，主要把数据拿到
      this.setData({
        cityleft: res.data.cityVos,
      })      
    }).catch(res => {
    })  
  },

  // 选中第一级触发
  selectleft: function (e) {
    this.setData({
      citycenter: this.data.cityleft[e.currentTarget.dataset.city].areaVos,//这个去拿第二级显示
      select1: e.currentTarget.dataset.id,
      cityright2: [],
      select2: '',
      select3: '',
      storeName: null
    });
  },

  // 选中第二级触发
  selectcenter: function (e) {
    this.setData({
      cityright2: this.data.citycenter[e.currentTarget.dataset.city].storeRegionVos,
//触发第二级拿到第三级显示
      select2: e.currentTarget.dataset.id,
      select3: '-1',
      storeName: null
    });
  },
  // 选中第三级触发
  selectright: function (e) {
    this.setData({
      storeName: e.currentTarget.dataset.storename,
      select3: e.currentTarget.dataset.id
    });
  },

 数据拿的不是标准的省市区json文件

JSON文件腾讯云地址：https://share.weiyun.com/5zlByJg（本文采用的标准地址为address2.json文件）