纯js实现省市区三级联动

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>demo</title><script type="text/javascript" src="./region.js"></script>
</head>
<body>省：<select name="province" id="province"></select>市：<select name="city" id="city"></select>区：<select name="county" id="county"></select><script type="text/javascript">var data = obj.regions;var province=document.getElementById('province');var city=document.getElementById('city');var county=document.getElementById('county');var option = "<option value='请选择'>请选择</option>";province.innerHTML = option;city.innerHTML = option;county.innerHTML = option;// 生成省列表for(var i=0;i<data.length;i++){var option_province=document.createElement('option');option_province.value=data[i].name;option_province.innerText=data[i].name;province.appendChild(option_province);}// 根据选择的省生成相应的城市列表province.onchange=function(e){for(var i=0;i<data.length;i++){if(data[i].name == e.target.value){var data_city=data[i].regions;var option_city=data_city.map(function(item){return `<option value="${item.name}">${item.name}</option>`}).join('');// 根据选择的城市生成相应的县级列表city.onchange=function(evt){for(var j=0;j<data_city.length;j++){if(data_city[j].name == evt.target.value){var data_county=data_city[j].regions;var option_count=data_county.map(function(items){return `<option value="${items.name}">${items.name}</option>`}).join('');}}county.innerHTML="<option value='请选择'>请选择</option>"+option_count;}}}city.innerHTML="<option value='请选择'>请选择</option>"+option_city;county.innerHTML="<option value='请选择'>请选择</option>"}</script>
</body>
</html>

效果如下：

说明：上面代码引入的<script type="text/javascript" src="./region.js"></script>是包含省市区数据的文件，文件部分内容如下，如需全篇内容，可点击此处查看整篇内容：

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

纯js实现省市区三级联动相关推荐

js实现省市区三级联动(三个下拉框实现)
js实现省市区三级联动(一个下拉框实现.页面可以多次引用) html代码: 您选择的是: <input type="text" value="" id=& ...
原生js之省市区三级联动
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
js实现省市区三级联动
原文作者:http://www.cnblogs.com/zjfree demo.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2 ...
【经典面试题】如何使用js实现省市区三级联动
目录一.省市区数据获取二.遍历省级数据三.二级联动的实现四.三级联动的实现一.省市区数据获取链接: https://pan.baidu.com/s/1AqXINno57a3og0oVYZC ...
JS 的省市区三级联动
JS省市县级联动页面上使用的是<select class="form-control" id="cmbProvince" name="cmbP ...
HTML+JS实现省市区三级联动亲测可用
在线调试预览地址 https://codepen.io/acelibin/pen/wGooev 1.html代码 html><head></head><body&g ...
纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

纯js实现省市区三级联动

纯js实现省市区三级联动

纯js实现省市区三级联动相关推荐

最新文章

热门文章