纯js实现省市区三级联动

纯js实现省市区三级联动

话不多说，直接上整篇代码

    
    
    


    省：
    市：
    区：
    

效果如下：

说明：上面代码引入的是包含省市区数据的文件，文件部分内容如下，如需全篇内容，可点击此处查看整篇内容：

var obj = {
“regions”: [{
“id”: 110000,
“name”: “北京”,
“regions”: [{
“id”: 110100,
“name”: “北京市”,
“regions”: [{
“id”: 110101,
“name”: “东城区”
}, {
“id”: 110102,
“name”: “西城区”
}, {
“id”: 110103,
“name”: “崇文区”
}, {
“id”: 110104,
“name”: “宣武区”
}, {
“id”: 110105,
“name”: “朝阳区”
}, {
“id”: 110106,
“name”: “丰台区”
}, {
“id”: 110107,
“name”: “石景山区”
}, {
“id”: 110108,
“name”: “海淀区”
}, {
“id”: 110109,
“name”: “门头沟区”
}, {
“id”: 110111,
“name”: “房山区”
}, {
“id”: 110112,
“name”: “通州区”
}, {
“id”: 110113,
“name”: “顺义区”
}, {
“id”: 110114,
“name”: “昌平区”
}, {
“id”: 110115,
“name”: “大兴区”
}, {
“id”: 110116,
“name”: “怀柔区”
}, {
“id”: 110117,
“name”: “平谷区”
}, {
“id”: 110228,
“name”: “密云县”
}, {
“id”: 110229,
“name”: “延庆县”
}]
}],
“pinyin”: “BeiJing”,
“hot”: true,
“municipality”: true
}, {
“id”: 120000,
“name”: “天津”,
“regions”: [{
“id”: 120100,
“name”: “天津市”,
“regions”: [{
“id”: 120101,
“name”: “和平区”
}, {
“id”: 120102,
“name”: “河东区”
}, {
“id”: 120103,
“name”: “河西区”
}, {
“id”: 120104,
“name”: “南开区”
}, {
“id”: 120105,
“name”: “河北区”
}, {
“id”: 120106,
“name”: “红桥区”
}, {
“id”: 120107,
“name”: “塘沽区”
}, {
“id”: 120108,
“name”: “汉沽区”
}, {
“id”: 120109,
“name”: “大港区”
}, {
“id”: 120110,
“name”: “东丽区”
}, {
“id”: 120111,
“name”: “西青区”
}, {
“id”: 120112,
“name”: “津南区”
}, {
“id”: 120113,
“name”: “北辰区”
}, {
“id”: 120114,
“name”: “武清区”
}, {
“id”: 120115,
“name”: “宝坻区”
}, {
“id”: 120221,
“name”: “宁河县”
}, {
“id”: 120223,
“name”: “静海县”
}, {
“id”: 120225,
“name”: “蓟县”
}]
}],
“pinyin”: “TianJin”,
“hot”: true,
“municipality”: true
}]