省、市、区、乡镇/街道地址四级联动react+jquery附带json数据

省、市、区、乡镇/街道地址四级联动react+jquery

主要使用jquery，无ui框架，适用性强
目前主要使用react开发项目，最近遇到一个需要四级联动的，但是antd中的地址数据格式不太好找，都是这样的：

于是就使用相对原始的下拉标签t+jquery写了个，安装jquery并import当前页面中就行，样式自己修改，下面是代码：
import React, { Component } from ‘react’;
import { connect } from ‘dva’;

import styles from ‘./style/classfly.less’;

import options from ‘…/assets/location.json’;

import $ from ‘jquery’;

@connect(state => ({
user: state.example
}))
export default class Classfly extends Component {
constructor(props) {
super(props);
this.state = {

}

}

componentDidMount() {

  var province = $('#province');
  var city = $('#city');
  var xian = $('#xian');
  var jie = $('#jie');
  //声明变量存放省份数据
  var citiesData;

  var provinceIndex;




  //获取数据
  citiesData = options;

  citiesData.forEach(function (value, index) {
    if (value.parentid == 0) {
      //生产option子元素
      var option = $("<option  id='" + value.id + "'>" + value.name + "</option>");
      // 添加省份
      province.append(option);
    }

  })

  /*省份改变时*/
  province.change(function () {
    city.empty();
    xian.empty();
    jie.empty();
    //测试打印  帮助理解，没啥用
    provinceIndex = $(this).val();//北京市
    var thisId = $(this).attr('id');//province
    var s_id = $("#province option:selected")
    console.log("11111111111111111111111", provinceIndex, thisId, this, s_id)
    console.log(s_id[0].id, "qwewqeqw")//获取option 的 id

    // 清空后恢复默认项
    var yuan_city = $("<option value='-1' selected disabled>市</option>")
    var yuan_jie = $("<option value='-1' selected disabled>街道/镇/乡</option>")
    var yuan_xian = $("<option value='-1' selected disabled>区/县</option>")
    city.append(yuan_city);
    xian.append(yuan_xian);
    jie.append(yuan_jie);

    citiesData.forEach(function (value, index) {
      if (value.parentid == s_id[0].id) {
        //生产option子元素
        console.log(value, "jjjj")
        var option = $("<option  id='" + value.id + "'>" + value.name + "</option>");
        // 添加省份
        city.append(option);
      }
    })
  });
  //地级市改变时
  city.change(function () {
    $('#xian').empty();
    $('#jie').empty();
    var c_id = $("#city option:selected")
    var yuan_xian = $("<option value='-1' selected disabled>区/县</option>")
    var yuan_jie = $("<option value='-1' selected disabled>街道/镇/乡</option>")
    xian.append(yuan_xian);
    jie.append(yuan_jie);

    citiesData.forEach(function (value, index) {
      if (value.parentid == c_id[0].id) {
        //生产option子元素
        var option = $("<option  id='" + value.id + "'>" + value.name + "</option>");
        xian.append(option);
      }

    })

  });
  //选中区县时
  xian.change(function () {
    $('#jie').empty();
    //获取区县的index

    var x_id = $("#xian option:selected")
    var yuan_jie = $("<option value='-1' selected disabled>街道/镇/乡</option>")
    jie.append(yuan_jie);
    citiesData.forEach(function (value, index) {

      if (value.parentid == x_id[0].id) {
        //生产option子元素
        var option = $("<option  id='" + value.id + "'>" + value.name + "</option>");

        jie.append(option);
      }
    })
  });
}

render() {

return (
  <div className={styles.app}>




    <select id="province" class="lian">
      <option value="-1" selected disabled>省/直辖市</option>
    </select>
    <select id="city" class="lian">
      <option value="-1" selected disabled>市</option>
    </select>
    <select id="xian" class="lian">
      <option value="-1" selected disabled>区/县</option>
    </select>
    <select id="jie" class="lian">
      <option value="-1" selected disabled>街道/镇/乡</option>
    </select>




  </div>
);

}
}

地址json文件链接: https://github.com/remember19951117/-react-JQuery.git.