关于全国省市县vue三级联动组件的实现

组件功能

功能点:

• 支持不限城市,不限地区(这个东西的实现..真心死磕了挺久) – 左右两边数据的同步
• 地区一次性多选,若是选择了所有地区会自动转为不限地区
• 数据迁移箭头的判断..选中数据才会有对应的按钮可以点击
• 已选位置的数据同步响应调用的地方,当然也可以外部传入…(新增传出,编辑依赖传入再组合)

组件代码

<template>
    <div class="manyAreaSelect">
        <div class="item">
            <div class="item-title">
                <span> 选择省</span>
            </div>
            <div class="item-content">
                <ul>
                    <li v-for="(item,index) in chinaArea" :class="item.selected?'active':''" :key="index" @click="getCityList(item)">{
  {item.regionName}}</li>
                </ul>
            </div>
            <div class="item-footer"></div>
        </div>
        <div class="item">
            <div class="item-title">
                <span>选择市</span>
            </div>
            <div class="item-content">
                <ul v-show="cityList.length===0">
                    <li>
                        <<请选择省份</li>
                </ul>
                <ul v-show="!notLimitButton.notLimitCity &&cityList.length!==0">
                    <li v-for="(item,index) in cityList" :class="item.selected ? 'active':''" :key="index" @click="getDistricList(item)">{
  {item.regionName}}</li>
                </ul>
            </div>
            <div class="item-footer">
                <button class="button" :class="notLimitButton.notLimitCity?'success':''" @click="cityNotLitmit({regionName:'不限',regionId:'0'})" size="mini" :disabled="!selectItem.province.regionName">不限城市</button>
            </div>
        </div>
        <div class="item">
            <div class="item-title">
                <span>选择地区</span>
            </div>
            <div class="item-content">
                <ul v-show="districList.length===0">
                    <li>
                        <<请选择城市</li>
                </ul>
                <ul v-show="!notLimitButton.notLimitCity && !notLimitButton.notLimitDistrict && districList.length!==0">
                    <li v-for="(item,index) in districList" :class="item.selected?'active':''" :key="index" @click="getAreaCombineID(item)">{
  {item.regionName}}</li>
                </ul>
            </div>
            <div class="item-footer">
                <button class="button" :class="notLimitButton.notLimitDistrict ?'success':''" @click="districNotLitmit({regionName:'不限',regionId:'0'})" :disabled="!selectItem.city.regionName ||!selectItem.province.regionName || notLimitButton.notLimitCity ">不限地区</button>
            </div>
        </div>
        <div class="trangle">
            <div class="trangle-wrap">
                <div class="left">
                    <button class="button" @click="transferToRight" :disabled="direactionStatusToRight">
                        <i :class="this.iconDirection.right"></i>
                    </button>
                </div>
                <div class="right">
                    <button class="button" @click="transferToLeft" :disabled="direactionStatusToLeft">
                        <i :class="this.iconDirection.left"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class=" item ">
            <div class="item-title ">
                <span>已选位置</span>
            </div>
            <div class="item-content ">
                <ul class="selectedContent">
                    <li v-for="(item,index) in selectedList" :class="item.selected?'active':''" :key="index" @click="selectedAreaSingle(item)">{
  {item.regionName}}</li>
                </ul>
            </div>
            <div class="item-footer">
                <button class="button" @click="selectedAllArea()" :disabled="rightDataList.length=== 0" :class="selectedAllButtonStatus?'success':''">{
  {selectedAllButtonStatus?'反选':'全部'}}</button>
            </div>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash';


    export default {
        name: 'manyAreaSelect',
        data: function () {
            return {
                chinaArea: [], //json组合 {"regionId":"","regionName":"","child":[]}
                notLimitButton: {
                    notLimitCity: false, // 城市不限
                    notLimitDistrict: false, // 地区不限
                },
                selectedAllButtonStatus: false, // 已选位置列表全部按钮的状态
                selectItem: {
                    province: {},
                    city: {},
                    distric: {}
                },
                cityList: [], // 城市列表
                districList: [], // 区域列表
                rightDataList: [], // 选中项目组合成的渲染列表
                rightData: [], // 选中需要移除的
                leftData: [], // 左边选中的转发
            }
        },
        props: {
            selectedData: {
                type: [String, Object, Array]
            },
            iconDirection: {
                type: Object,
                default: function () { // 箭头图标
                    return {
                        left: 'fzicon fz-ad-you',
                        right: 'fzicon fz-ad-right'
                    }
                }
            }
        },
        computed: {
            selectedList () { // 已选中列表
                if (this.selectedData && this.selectedData !== '') {
                    this.rightDataList = this.selectedData;
                    return this.rightDataList;
                } else {
                    return this.rightDataList;
                }

            },
            direactionStatusToRight () { // 控制可以转移的箭头状态
                if (this.notLimitButton.notLimitCity || this.notLimitButton.notLimitDistrict) {
                    if (this.notLimitButton.notLimitCity) {
                        this.removeAllSelected(this.cityList);
                        this.removeAllSelected(this.districList);
                        return false;
                    } else {
                        if (this.notLimitButton.notLimitDistrict) {
                            this.removeAllSelected(this.districList);
                            return false;
                        }
                    }
                    return false;
                } else {
                    if (this.selectItem.distric.regionName) {
                        return false;
                    }
                    return true;
                }
            },
            direactionStatusToLeft () { // 控制可以转移的箭头状态
                if (this.rightData.length === 0) {
                    return true
                } else {
                    return false
                }
            }
        },
        methods: {
            mapSelect (list, value, type) { // 高亮选中
                if (type) {
                    return list.map(pitem => {
                        if (pitem.regionId === value.regionId) {
                            if (value.selected && value.selected === true) {
                                this.$delete(pitem, 'selected');
                            } else {
                                this.$set(pitem, 'selected', true)
                            }
                        }
                    })
                } else {
                    return list.map(pitem => {
                        if (pitem.regionId === value.regionId) {
                            if (value.selected && value.selected === true) {
                                this.$delete(pitem, 'selected');
                            } else {
                                this.$set(pitem, 'selected', true)
                            }
                        } else {
                            this.$delete(pitem, 'selected');
                        }
                    })
                }
            },
            resetToDefault () {
                this.leftData = []; // 清空需要转移的数组
                this.notLimitButton = { // 重置按钮状态
                    notLimitCity: false, // 城市不限
                    notLimitDistrict: false, // 地区不限
                };
                this.selectItem.city = {};
                this.selectItem.distric = {}
                this.removeAllSelected(this.cityList); // 清除选中状态
                this.removeAllSelected(this.districList); // 清除选中状态
                this.cityList = [];
                this.districList = [];
            },
            getCityList (item) {
                this.resetToDefault();
                if (item) {
                    this.cityList = item.child; // 获取城市列表
                    this.selectItem.province = item; // 保存省份对象
                    this.mapSelect(this.chinaArea, item); // 高亮选择,单选
                }
            },
            getDistricList (item) {
                this.leftData = []; // 清空需要转移的数组
                this.notLimitButton.notLimitDistrict = false; // 重置按钮状态
                this.removeAllSelected(this.districList); // 清除选中状态
                this.selectItem.distric = {};
                this.districList = [];
                if (item) {
                    this.districList = item.child; // 获取区域列表
                    this.selectItem.city = item; // 保存省份对象
                    this.mapSelect(this.cityList, item); // 高亮选择,单选
                }

            },
            getAreaCombineID (item) { // 获取组合ID
                if (item) {
                    this.selectItem.distric = item;
                    this.mapSelect(this.districList, item, 'manySelect'); // 区域高亮选择,多选

                    this.leftData.push({
                        regionName: this.selectItem.province.regionName + '-' + this.selectItem.city.regionName + '-' + item.regionName,
                        regionId: this.selectItem.province.regionId + '-' + this.selectItem.city.regionId + '-' + item.regionId
                    })
                    this.leftData = _.uniqBy(this.leftData, 'regionId');
                    if (this.leftData.length === this.districList.length) {
                        this.leftData = [];
                        this.notLimitButton.notLimitDistrict = true; // 转为不限制地区
                        this.leftData.push({
                            regionName: this.selectItem.province.regionName + '-' + this.selectItem.city.regionName + '-不限',
                            regionId: this.selectItem.province.regionId + '-' + this.selectItem.city.regionId + '-0'
                        })
                    }
                }

            },
            cityNotLitmit (item) { // 城市不限
                this.leftData = []; // 请空数组
                this.notLimitButton.notLimitCity = !this.notLimitButton.notLimitCity; // 不限按钮状态
                this.leftData.push({
                    regionName: this.selectItem.province.regionName + '-不限-不限',
                    regionId: this.selectItem.province.regionId + '-0-0'
                })
            },
            districNotLitmit (item) { // 区域不限
                this.leftData = []; // 请空数组
                this.notLimitButton.notLimitDistrict = !this.notLimitButton.notLimitDistrict; // 不限按钮状态
                this.leftData.push({
                    regionName: this.selectItem.province.regionName + '-' + this.selectItem.city.regionName + '-不限',
                    regionId: this.selectItem.province.regionId + '-' + this.selectItem.city.regionId + '-0'
                })
            },
            transferToRight () { // 选中推入到已选中列表区域
                if (this.leftData && this.leftData.length !== 0) {
                    if (this.leftData.length === 1) { // 长度只有1,那就只有不限城市或者地区了
                        let limitId = this.leftData[0].regionId.split('-'); // 比对比对,切割成数组
                        this.rightDataList.map(item => {
                            let id = item.regionId.split('-');
                            if (limitId[0] === id[0]) {
                                if (limitId[1] === '0') { // 不限城市
                                    this.rightDataList = this.rightDataList.filter(ritem => {
                                        let rid = ritem.regionId.split('-');
                                        if (limitId[0] !== rid[0]) {
                                            return ritem;
                                        }
                                    })
                                } else {
                                    if (limitId[2] === '0') { // 不限地区
                                        this.rightDataList = this.rightDataList.filter(ritem => {
                                            let rid = ritem.regionId.split('-');
                                            if ((limitId[0] === rid[0] && limitId[1] === rid[1])) {
                                                if (ritem[2] === '0') {
                                                    return ritem;
                                                }
                                            } else {
                                                if (limitId[0] !== rid[0] || limitId[1] !== rid[1]) {
                                                    return ritem;
                                                }
                                            }
                                        })
                                    } else {
                                        this.rightDataList = this.rightDataList.filter(ritem => {
                                            let rid = ritem.regionId.split('-');
                                            if (limitId[0] === rid[0]) {
                                                if (limitId[1] === rid[1]) {
                                                    if (!(rid[2] === '0')) {
                                                        return ritem;
                                                    }
                                                } else {
                                                    if (!(rid[1] === '0')) {
                                                        return ritem
                                                    }
                                                }
                                            } else {
                                                return ritem
                                            }
                                        })
                                    }
                                }

                            }
                        })
                    } else {
                        let limitId = this.leftData[0].regionId.split('-'); // 比对比对,切割成数组
                        this.rightDataList = this.rightDataList.filter(ritem => {
                            let rid = ritem.regionId.split('-');
                            if (limitId[0] === rid[0]) {
                                if (limitId[1] === rid[1]) {
                                    if (!(rid[2] === '0')) {
                                        return ritem;
                                    }
                                } else {
                                    if (!(rid[1] === '0')) {
                                        return ritem
                                    }
                                }
                            } else {
                                return ritem
                            }
                        })
                    }
                    this.leftData.map(item => {
                        this.rightDataList.push(item);
                    })
                    this.rightDataList = _.uniqBy(this.rightDataList, 'regionId');
                    this.resetToDefault();
                }


            },
            selectedAreaSingle (item) { // 已选择区域单个选择
                if (item) {
                    this.rightData = [];
                    this.mapSelect(this.rightDataList, item, 'manySelect'); // 区域高亮选择,多选
                    this.rightDataList.map(item => {
                        if (item.selected) {
                            this.rightData.push(item)
                        }
                    })
                }

            },
            selectedAllArea () { // 已选中区域全选反选
                if (this.selectedAllButtonStatus) {
                    this.removeAllSelected(this.rightDataList);
                    this.rightData = [];
                } else {
                    this.rightDataList.map(item => this.$set(item, 'selected', true));
                    this.rightData = this.rightDataList;
                }
                this.selectedAllButtonStatus = !this.selectedAllButtonStatus;
            },
            transferToLeft () { // 从已选中列表区域退回待转发区域
                if (this.rightData && this.rightData.length !== 0) {
                    this.rightDataList = this.rightDataList.filter(item => {
                        if (!item.selected) {
                            return item;
                        }
                    })
                    this.rightData = [];
                }
            },
            removeAllSelected (list) { // 清空选中状态
                list.map(item => this.$delete(item, 'selected'));
            }
        },
        watch: {
            'rightDataList' (newValue, oldValue) { // 选择列表的值变动响应外部值的变动
                if (newValue.length !== this.rightData.length) {
                    this.selectedAllButtonStatus = false;
                } else {
                    if (newValue.length === 0) {
                        this.selectedAllButtonStatus = false;
                    } else {
                        this.selectedAllButtonStatus = true;
                    }
                }
                this.$emit('update:selectedData', newValue);
            }
        }
    }
</script>

<style scoped lang="scss">
    ul {
        padding: 0;
        margin: 0;
        max-height: 100%;
        overflow-y: auto;
        li {
            cursor: pointer;
            text-align: center;
            padding: 5px;
            &.active,
            &:hover {
                background: #e4e8f1;
                color: #48576a;
            }
        }
    }

    .manyAreaSelect {
        position: relative;
        z-index: 2005;
        .item {
            border: 1px solid #d1dbe5;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            display: inline-block;
            vertical-align: middle;
            min-width: 180px;
            box-sizing: border-box;
            position: relative;
            height: 100%;
            min-height: 260px;
        }
        .item-title {
            height: 36px;
            line-height: 36px;
            background: #fbfdff;
            margin: 0;
            border-bottom: 1px solid #d1dbe5;
            box-sizing: border-box;
            color: #1f2d3d;
            text-align: center;
        }
        .trangle {
            background: transparent;
            display: inline-block;
            vertical-align: middle;
            width: 40px;
            box-sizing: border-box;
            height: 100%;
            position: relative;
            .trangle-wrap {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .left,
            .right {
                margin: 10px 5px;
            }
        ;
        }

        .item-content {
            font-size: 13px;
            height: 190px;
            padding: 8px 2px;
        }
        .item-footer {
            padding: 5px 0;
            height: 40px;
            text-align: center;
        }
    }

    .selectedContent {
        li {
            text-align: left;
            padding-left: 25px;
        }
    }



    .button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c4c4c4;
        color: #1f2d3d;
        margin: 0;
        border-radius: 4px;
        padding: 4px;
        font-size: 12px;
        border-radius: 4px;
        -webkit-appearance: button;
        outline: none;
        &.success {
            background: #42d885;
            border-color: #42d885;
            color: #fff;
        }

        &:disabled {
            color: #bfcbd9;
            cursor: not-allowed;
            background-image: none;
            background-color: #eef1f6;
            border-color: #d1dbe5;
        }
    }
</style>

全国区域配置json

[{"child":[{"child":[{"regionId":"110101","regionName":"东城区"},{"regionId":"110102","regionName":"西城区"},{"regionId":"110105","regionName":"朝阳区"},{"regionId":"110106","regionName":"丰台区"},{"regionId":"110107","regionName":"石景山区"},{"regionId":"110108","regionName":"海淀区"},{"regionId":"110109","regionName":"门头沟区"},{"regionId":"110111","regionName":"房山区"},{"regionId":"110112","regionName":"通州区"},{"regionId":"110113","regionName":"顺义区"},{"regionId":"110114","regionName":"昌平区"},{"regionId":"110115","regionName":"大兴区"},{"regionId":"110116","regionName":"怀柔区"},{"regionId":"110117","regionName":"平谷区"},{"regionId":"110118","regionName":"密云区"},{"regionId":"110119","regionName":"延庆区"}],"regionId":"01","regionName":"市辖区"}],"regionId":"11","regionName":"北京市"},{"child":[{"child":[{"regionId":"120101","regionName":"和平区"},{"regionId":"120102","regionName":"河东区"},{"regionId":"120103","regionName":"河西区"},{"regionId":"120104","regionName":"南开区"},{"regionId":"120105","regionName":"河北区"},{"regionId":"120106","regionName":"红桥区"},{"regionId":"120110","regionName":"东丽区"},{"regionId":"120111","regionName":"西青区"},{"regionId":"120112","regionName":"津南区"},{"regionId":"120113","regionName":"北辰区"},{"regionId":"120114","regionName":"武清区"},{"regionId":"120115","regionName":"宝坻区"},{"regionId":"120116","regionName":"滨海新区"},{"regionId":"120117","regionName":"宁河区"},{"regionId":"120118","regionName":"静海区"},{"regionId":"120119","regionName":"蓟州区"}],"regionId":"01","regionName":"市辖区"}],"regionId":"12","regionName":"天津市"},{"child":[{"child":[{"regionId":"131101","regionName":"市辖区"},{"regionId":"131102","regionName":"桃城区"},{"regionId":"131103","regionName":"冀州区"},{"regionId":"131121","regionName":"枣强县"},{"regionId":"131122","regionName":"武邑县"},{"regionId":"131123","regionName":"武强县"},{"regionId":"131124","regionName":"饶阳县"},{"regionId":"131125","regionName":"安平县"},{"regionId":"131126","regionName":"故城县"},{"regionId":"131127","regionName":"景县"},{"regionId":"131128","regionName":"阜城县"},{"regionId":"131182","regionName":"深州市"}],"regionId":"11","regionName":"衡水市"},{"child":[{"regionId":"130101","regionName":"市辖区"},{"regionId":"130102","regionName":"长安区"},{"regionId":"130104","regionName":"桥西区"},{"regionId":"130105","regionName":"新华区"},{"regionId":"130107","regionName":"井陉矿区"},{"regionId":"130108","regionName":"裕华区"},{"regionId":"130109","regionName":"藁城区"},{"regionId":"130110","regionName":"鹿泉区"},{"regionId":"130111","regionName":"栾城区"},{"regionId":"130121","regionName":"井陉县"},{"regionId":"130123","regionName":"正定县"},{"regionId":"130125","regionName":"行唐县"},{"regionId":"130126","regionName":"灵寿县"},{"regionId":"130127","regionName":"高邑县"},{"regionId":"130128","regionName":"深泽县"},{"regionId":"130129","regionName":"赞皇县"},{"regionId":"130130","regionName":"无极县"},{"regionId":"130131","regionName":"平山县"},{"regionId":"130132","regionName":"元氏县"},{"regionId":"130133","regionName":"赵县"},{"regionId":"130183","regionName":"晋州市"},{"regionId":"130184","regionName":"新乐市"}],"regionId":"01","regionName":"石家庄市"},{"child":[{"regionId":"130201","regionName":"市辖区"},{"regionId":"130202","regionName":"路南区"},{"regionId":"130203","regionName":"路北区"},{"regionId":"130204","regionName":"古冶区"},{"regionId":"130205","regionName":"开平区"},{"regionId":"130207","regionName":"丰南区"},{"regionId":"130208","regionName":"丰润区"},{"regionId":"130209","regionName":"曹妃甸区"},{"regionId":"130223","regionName":"滦县"},{"regionId":"130224","regionName":"滦南县"},{"regionId":"130225","regionName":"乐亭县"},{"regionId":"130227","regionName":"迁西县"},{"regionId":"130229","regionName":"玉田县"},{"regionId":"130281","regionName":"遵化市"},{"regionId":"130283","regionName":"迁安市"}],"regionId":"02","regionName":"唐山市"},{"child":[{"regionId":"130301","regionName":"市辖区"},{"regionId":"130302","regionName":"海港区"},{"regionId":"130303","regionName":"山海关区"},{"regionId":"130304","regionName":"北戴河区"},{"regionId":"130306","regionName":"抚宁区"},{"regionId":"130321","regionName":"青龙满族自治县"},{"regionId":"130322","regionName":"昌黎县"},{"regionId":"130324","regionName":"卢龙县"}],"regionId":"03","regionName":"秦皇岛市"},{"child":[{"regionId":"130401","regionName":"市辖区"},{"regionId":"130402","regionName":"邯山区"},{"regionId":"130403","regionName":"丛台区"},{"regionId":"130404","regionName":"复兴区"},{"regionId":"130406","regionName":"峰峰矿区"},{"regionId":"130421","regionName":"邯郸县"},{"regionId":"130423","regionName":"临漳县"},{"regionId":"130424","regionName":"成安县"},{"regionId":"130425","regionName":"大名县"},{"regionId":"130426","regionName":"涉县"},{"regionId":"130427","regionName":"磁县"},{"regionId":"130428","regionName":"肥乡县"},{"regionId":"130429","regionName":"永年县"},{"regionId":"130430","regionName":"邱县"},{"regionId":"130431","regionName":"鸡泽县"},{"regionId":"130432","regionName":"广平县"},{"regionId":"130433","regionName":"馆陶县"},{"regionId":"130434","regionName":"魏县"},{"regionId":"130435","regionName":"曲周县"},{"regionId":"130481","regionName":"武安市"}],"regionId":"04","regionName":"邯郸市"},{"child":[{"regionId":"130501","regionName":"市辖区"},{"regionId":"130502","regionName":"桥东区"},{"regionId":"130503","regionName":"桥西区"},{"regionId":"130521","regionName":"邢台县"},{"regionId":"130522","regionName":"临城县"},{"regionId":"130523","regionName":"内丘县"},{"regionId":"130524","regionName":"柏乡县"},{"regionId":"130525","regionName":"隆尧县"},{"regionId":"130526","regionName":"任县"},{"regionId":"130527","regionName":"南和县"},{"regionId":"130528","regionName":"宁晋县"},{"regionId":"130529","regionName":"巨鹿县"},{"regionId":"130530","regionName":"新河县"},{"regionId":"130531","regionName":"广宗县"},{"regionId":"130532","regionName":"平乡县"},{"regionId":"130533","regionName":"威县"},{"regionId":"130534","regionName":"清河县"},{"regionId":"130535","regionName":"临西县"},{"regionId":"130581","regionName":"南宫市"},{"regionId":"130582","regionName":"沙河市"}],"regionId":"05","regionName":"邢台市"},{"child":[{"regionId":"130601","regionName":"市辖区"},{"regionId":"130602","regionName":"竞秀区"},{"regionId":"130606","regionName":"莲池区"},{"regionId":"130607","regionName":"满城区"},{"regionId":"130608","regionName":"清苑区"},{"regionId":"130609","regionName":"徐水区"},{"regionId":"130623","regionName":"涞水县"},{"regionId":"130624","regionName":"阜平县"},{"regionId":"130626","regionName":"定兴县"},{"regionId":"130627","regionName":"唐县"},{"regionId":"130628","regionName":"高阳县"},{"regionId":"130629","regionName":"容城县"},{"regionId":"130630","regionName":"涞源县"},{"regionId":"130631","regionName":"望都县"},{"regionId":"130632","regionName":"安新县"},{"regionId":"130633","regionName":"易县"},{"regionId":"130634","regionName":"曲阳县"},{"regionId":"130635","regionName":"蠡县"},{"regionId":"130636","regionName":"顺平县"},{"regionId":"130637","regionName":"博野县"},{"regionId":"130638","regionName":"雄县"},{"regionId":"130681","regionName":"涿州市"},{"regionId":"130683","regionName":"安国市"},{"regionId":"130684","regionName":"高碑店市"}],"regionId":"06","regionName":"保定市"},{"child":[{"regionId":"130701","regionName":"市辖区"},{"regionId":"130702","regionName":"桥东区"},{"regionId":"130703","regionName":"桥西区"},{"regionId":"130705","regionName":"宣化区"},{"regionId":"130706","regionName":"下花园区"},{"regionId":"130708","regionName":"万全区"},{"regionId":"130709","regionName":"崇礼区"},{"regionId":"130722","regionName":"张北县"},{"regionId":"130723","regionName":"康保县"},{"regionId":"130724","regionName":"沽源县"},{"regionId":"130725","regionName":"尚义县"},{"regionId":"130726","regionName":"蔚县"},{"regionId":"130727","regionName":"阳原县"},{"regionId":"130728","regionName":"怀安县"},{"regionId":"130730","regionName":"怀来县"},{"regionId":"130731","regionName":"涿鹿县"},{"regionId":"130732","regionName":"赤城县"}],"regionId":"07","regionName":"张家口市"},{"child":[{"regionId":"130801","regionName":"市辖区"},{"regionId":"130802","regionName":"双桥区"},{"regionId":"130803","regionName":"双滦区"},{"regionId":"130804","regionName":"鹰手营子矿区"},{"regionId":"130821","regionName":"承德县"},{"regionId":"130822","regionName":"兴隆县"},{"regionId":"130823","regionName":"平泉县"},{"regionId":"130824","regionName":"滦平县"},{"regionId":"130825","regionName":"隆化县"},{"regionId":"130826","regionName":"丰宁满族自治县"},{"regionId":"130827","regionName":"宽城满族自治县"},{"regionId":"130828","regionName":"围场满族蒙古族自治县"}],"regionId":"08","regionName":"承德市"},{"child":[{"regionId":"130901","regionName":"市辖区"},{"regionId":"130902","regionName":"新华区"},{"regionId":"130903","regionName":"运河区"},{"regionId":"130921","regionName":"沧县"},{"regionId":"130922","regionName":"青县"},{"regionId":"130923","regionName":"东光县"},{"regionId":"130924","regionName":"海兴县"},{"regionId":"130925","regionName":"盐山县"},{"regionId":"130926","regionName":"肃宁县"},{"regionId":"130927","regionName":"南皮县"},{"regionId":"130928","regionName":"吴桥县"},{"regionId":"130929","regionName":"献县"},{"regionId":"130930","regionName":"孟村回族自治县"},{"regionId":"130981","regionName":"泊头市"},{"regionId":"130982","regionName":"任丘市"},{"regionId":"130983","regionName":"黄骅市"},{"regionId":"130984","regionName":"河间市"}],"regionId":"09","regionName":"沧州市"},{"child":[{"regionId":"139001","regionName":"定州市"},{"regionId":"139002","regionName":"辛集市"}],"regionId":"90","regionName":"省直辖县级行政区划"},{"child":[{"regionId":"131001","regionName":"市辖区"},{"regionId":"131002","regionName":"安次区"},{"regionId":"131003","regionName":"广阳区"},{"regionId":"131022","regionName":"固安县"},{"regionId":"131023","regionName":"永清县"},{"regionId":"131024","regionName":"香河县"},{"regionId":"131025","regionName":"大城县"},{"regionId":"131026","regionName":"文安县"},{"regionId":"131028","regionName":"大厂回族自治县"},{"regionId":"131081","regionName":"霸州市"},{"regionId":"131082","regionName":"三河市"}],"regionId":"10","regionName":"廊坊市"}],"regionId":"13","regionName":"河北省"},{"child":[{"child":[{"regionId":"141101","regionName":"市辖区"},{"regionId":"141102","regionName":"离石区"},{"regionId":"141121","regionName":"文水县"},{"regionId":"141122","regionName":"交城县"},{"regionId":"141123","regionName":"兴县"},{"regionId":"141124","regionName":"临县"},{"regionId":"141125","regionName":"柳林县"},{"regionId":"141126","regionName":"石楼县"},{"regionId":"141127","regionName":"岚县"},{"regionId":"141128","regionName":"方山县"},{"regionId":"141129","regionName":"中阳县"},{"regionId":"141130","regionName":"交口县"},{"regionId":"141181","regionName":"孝义市"},{"regionId":"141182","regionName":"汾阳市"}],"regionId":"11","regionName":"吕梁市"},{"child":[{"regionId":"140101","regionName":"市辖区"},{"regionId":"140105","regionName":"小店区"},{"regionId":"140106","regionName":"迎泽区"},{"regionId":"140107","regionName":"杏花岭区"},{"regionId":"140108","regionName":"尖草坪区"},{"regionId":"140109","regionName":"万柏林区"},{"regionId":"140110","regionName":"晋源区"},{"regionId":"140121","regionName":"清徐县"},{"regionId":"140122","regionName":"阳曲县"},{"regionId":"140123","regionName":"娄烦县"},{"regionId":"140181","regionName":"古交市"}],"regionId":"01","regionName":"太原市"},{"child":[{"regionId":"140201","regionName":"市辖区"},{"regionId":"140202","regionName":"城区"},{"regionId":"140203","regionName":"矿区"},{"regionId":"140211","regionName":"南郊区"},{"regionId":"140212","regionName":"新荣区"},{"regionId":"140221","regionName":"阳高县"},{"regionId":"140222","regionName":"天镇县"},{"regionId":"140223","regionName":"广灵县"},{"regionId":"140224","regionName":"灵丘县"},{"regionId":"140225","regionName":"浑源县"},{"regionId":"140226","regionName":"左云县"},{"regionId":"140227","regionName":"大同县"}],"regionId":"02","regionName":"大同市"},{"child":[{"regionId":"140301","regionName":"市辖区"},{"regionId":"140302","regionName":"城区"},{"regionId":"140303","regionName":"矿区"},{"regionId":"140311","regionName":"郊区"},{"regionId":"140321","regionName":"平定县"},{"regionId":"140322","regionName":"盂县"}],"regionId":"03","regionName":"阳泉市"},{"child":[{"regionId":"140401","regionName":"市辖区"},{"regionId":"140402","regionName":"城区"},{"regionId":"140411","regionName":"郊区"},{"regionId":"140421","regionName":"长治县"},{"regionId":"140423","regionName":"襄垣县"},{"regionId":"140424","regionName":"屯留县"},{"regionId":"140425","regionName":"平顺县"},{"regionId":"140426","regionName":"黎城县"},{"regionId":"140427","regionName":"壶关县"},{"regionId":"140428","regionName":"长子县"},{"regionId":"140429","regionName":"武乡县"},{"regionId":"140430","regionName":"沁县"},{"regionId":"140431","regionName":"沁源县"},{"regionId":"140481","regionName":"潞城市"}],"regionId":"04","regionName":"长治市"},{"child":[{"regionId":"140501","regionName":"市辖区"},{"regionId":"140502","regionName":"城区"},{"regionId":"140521","regionName":"沁水县"},{"regionId":"140522","regionName":"阳城县"},{"regionId":"140524","regionName":"陵川县"},{"regionId":"140525","regionName":"泽州县"},{"regionId":"140581","regionName":"高平市"}],"regionId":"05","regionName":"晋城市"},{"child":[{"regionId":"140601","regionName":"市辖区"},{"regionId":"140602","regionName":"朔城区"},{"regionId":"140603","regionName":"平鲁区"},{"regionId":"140621","regionName":"山阴县"},{"regionId":"140622","regionName":"应县"},{"regionId":"140623","regionName":"右玉县"},{"regionId":"140624","regionName":"怀仁县"}],"regionId":"06","regionName":"朔州市"},{"child":[{"regionId":"140701","regionName":"市辖区"},{"regionId":"140702","regionName":"榆次区"},{"regionId":"140721","regionName":"榆社县"},{"regionId":"140722","regionName":"左权县"},{"regionId":"140723","regionName":"和顺县"},{"regionId":"140724","regionName":"昔阳县"},{"regionId":"140725","regionName":"寿阳县"},{"regionId":"140726","regionName":"太谷县"},{"regionId":"140727","regionName":"祁县"},{"regionId":"140728","regionName":"平遥县"},{"regionId":"140729","regionName":"灵石县"},{"regionId":"140781","regionName":"介休市"}],"regionId":"07","regionName":"晋中市"},{"child":[{"regionId":"140801","regionName":"市辖区"},{"regionId":"140802","regionName":"盐湖区"},{"regionId":"140821","regionName":"临猗县"},{"regionId":"140822","regionName":"万荣县"},{"regionId":"140823","regionName":"闻喜县"},{"regionId":"140824","regionName":"稷山县"},{"regionId":"140825","regionName":"新绛县"},{"regionId":"140826","regionName":"绛县"},{"regionId":"140827","regionName":"垣曲县"},{"regionId":"140828","regionName":"夏县"},{"regionId":"140829","regionName":"平陆县"},{"regionId":"140830","regionName":"芮城县"},{"regionId":"140881","regionName":"永济市"},{"regionId":"140882","regionName":"河津市"}],"regionId":"08","regionName":"运城市"},{"child":[{"regionId":"140901","regionName":"市辖区"},{"regionId":"140902","regionName":"忻府区"},{"regionId":"140921","regionName":"定襄县"},{"regionId":"140922","regionName":"五台县"},{"regionId":"140923","regionName":"代县"},{"regionId":"140924","regionName":"繁峙县"},{"regionId":"140925","regionName":"宁武县"},{"regionId":"140926","regionName":"静乐县"},{"regionId":"140927","regionName":"神池县"},{"regionId":"140928","regionName":"五寨县"},{"regionId":"140929","regionName":"岢岚县"},{"regionId":"140930","regionName":"河曲县"},{"regionId":"140931","regionName":"保德县"},{"regionId":"140932","regionName":"偏关县"},{"regionId":"140981","regionName":"原平市"}],"regionId":"09","regionName":"忻州市"},{"child":[{"regionId":"141001","regionName":"市辖区"},{"regionId":"141002","regionName":"尧都区"},{"regionId":"141021","regionName":"曲沃县"},{"regionId":"141022","regionName":"翼城县"},{"regionId":"141023","regionName":"襄汾县"},{"regionId":"141024","regionName":"洪洞县"},{"regionId":"141025","regionName":"古县"},{"regionId":"141026","regionName":"安泽县"},{"regionId":"141027","regionName":"浮山县"},{"regionId":"141028","regionName":"吉县"},{"regionId":"141029","regionName":"乡宁县"},{"regionId":"141030","regionName":"大宁县"},{"regionId":"141031","regionName":"隰县"},{"regionId":"141032","regionName":"永和县"},{"regionId":"141033","regionName":"蒲县"},{"regionId":"141034","regionName":"汾西县"},{"regionId":"141081","regionName":"侯马市"},{"regionId":"141082","regionName":"霍州市"}],"regionId":"10","regionName":"临汾市"}],"regionId":"14","regionName":"山西省"},{"child":[{"child":[{"regionId":"152201","regionName":"乌兰浩特市"},{"regionId":"152202","regionName":"阿尔山市"},{"regionId":"152221","regionName":"科尔沁右翼前旗"},{"regionId":"152222","regionName":"科尔沁右翼中旗"},{"regionId":"152223","regionName":"扎赉特旗"},{"regionId":"152224","regionName":"突泉县"}],"regionId":"22","regionName":"兴安盟"},{"child":[{"regionId":"150101","regionName":"市辖区"},{"regionId":"150102","regionName":"新城区"},{"regionId":"150103","regionName":"回民区"},{"regionId":"150104","regionName":"玉泉区"},{"regionId":"150105","regionName":"赛罕区"},{"regionId":"150121","regionName":"土默特左旗"},{"regionId":"150122","regionName":"托克托县"},{"regionId":"150123","regionName":"和林格尔县"},{"regionId":"150124","regionName":"清水河县"},{"regionId":"150125","regionName":"武川县"}],"regionId":"01","regionName":"呼和浩特市"},{"child":[{"regionId":"150201","regionName":"市辖区"},{"regionId":"150202","regionName":"东河区"},{"regionId":"150203","regionName":"昆都仑区"},{"regionId":"150204","regionName":"青山区"},{"regionId":"150205","regionName":"石拐区"},{"regionId":"150206","regionName":"白云鄂博矿区"},{"regionId":"150207","regionName":"九原区"},{"regionId":"150221","regionName":"土默特右旗"},{"regionId":"150222","regionName":"固阳县"},{"regionId":"150223","regionName":"达尔罕茂明安联合旗"}],"regionId":"02","regionName":"包头市"},{"child":[{"regionId":"150301","regionName":"市辖区"},{"regionId":"150302","regionName":"海勃湾区"},{"regionId":"150303","regionName":"海南区"},{"regionId":"150304","regionName":"乌达区"}],"regionId":"03","regionName":"乌海市"},{"child":[{"regionId":"152501","regionName":"二连浩特市"},{"regionId":"152502","regionName":"锡林浩特市"},{"regionId":"152522","regionName":"阿巴嘎旗"},{"regionId":"152523","regionName":"苏尼特左旗"},{"regionId":"152524","regionName":"苏尼特右旗"},{"regionId":"152525","regionName":"东乌珠穆沁旗"},{"regionId":"152526","regionName":"西乌珠穆沁旗"},{"regionId":"152527","regionName":"太仆寺旗"},{"regionId":"152528","regionName":"镶黄旗"},{"regionId":"152529","regionName":"正镶白旗"},{"regionId":"152530","regionName":"正蓝旗"},{"regionId":"152531","regionName":"多伦县"}],"regionId":"25","regionName":"锡林郭勒盟"},{"child":[{"regionId":"150401","regionName":"市辖区"},{"regionId":"150402","regionName":"红山区"},{"regionId":"150403","regionName":"元宝山区"},{"regionId":"150404","regionName":"松山区"},{"regionId":"150421","regionName":"阿鲁科尔沁旗"},{"regionId":"150422","regionName":"巴林左旗"},{"regionId":"150423","regionName":"巴林右旗"},{"regionId":"150424","regionName":"林西县"},{"regionId":"150425","regionName":"克什克腾旗"},{"regionId":"150426","regionName":"翁牛特旗"},{"regionId":"150428","regionName":"喀喇沁旗"},{"regionId":"150429","regionName":"宁城县"},{"regionId":"150430","regionName":"敖汉旗"}],"regionId":"04","regionName":"赤峰市"},{"child":[{"regionId":"150501","regionName":"市辖区"},{"regionId":"150502","regionName":"科尔沁区"},{"regionId":"150521","regionName":"科尔沁左翼中旗"},{"regionId":"150522","regionName":"科尔沁左翼后旗"},{"regionId":"150523","regionName":"开鲁县"},{"regionId":"150524","regionName":"库伦旗"},{"regionId":"150525","regionName":"奈曼旗"},{"regionId":"150526","regionName":"扎鲁特旗"},{"regionId":"150581","regionName":"霍林郭勒市"}],"regionId":"05","regionName":"通辽市"},{"child":[{"regionId":"150601","regionName":"市辖区"},{"regionId":"150602","regionName":"东胜区"},{"regionId":"150603","regionName":"康巴什区"},{"regionId":"150621","regionName":"达拉特旗"},{"regionId":"150622","regionName":"准格尔旗"},{"regionId":"150623","regionName":"鄂托克前旗"},{"regionId":"150624","regionName":"鄂托克旗"},{"regionId":"150625","regionName":"杭锦旗"},{"regionId":"150626","regionName":"乌审旗"},{"regionId":"150627","regionName":"伊金霍洛旗"}],"regionId":"06","regionName":"鄂尔多斯市"},{"child":[{"regionId":"150701","regionName":"市辖区"},{"regionId":"150702","regionName":"海拉尔区"},{"regionId":"150703","regionName":"扎赉诺尔区"},{"regionId":"150721","regionName":"阿荣旗"},{