一、省市区数据获取

链接: https://pan.baidu.com/s/1AqXINno57a3og0oVYZCn0g?pwd=6beh 提取码: 6beh

效果展示

二、遍历省级数据

1.导入数据

2.在body标签创建三个下拉框

3.分别获取这三个下拉框

4.遍历数据

5.添加到省级下拉框中

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入数据 --><script src="./area-json.js"></script>
</head>
<body><!-- 2.在body标签创建三个下拉框 --><select name="" id="sheng"><option value="">---请选择---</option></select><select name="" id="shi"><option value="">---请选择---</option></select><select name="" id="qu"><option value="">---请选择---</option></select>
</body>
<script>// 3.分别获取这三个下拉框var sheng = document.getElementById("sheng");var shi = document.getElementById("shi");var qu = document.getElementById("qu");//创建一个文档片段节点frag，用于存储数据var frag = document.createDocumentFragment();// 4.遍历数据for (var i = 0; i < data.length; i++) {//console.log(data[i]);var option = document.createElement("option");option.innerHTML = data[i].name;option.value = data[i].code;//将创建出的option暂时存入frag中frag.appendChild(option);}// 5.添加到省级下拉框中sheng.appendChild(frag);
</script>
</html>

三、二级联动的实现

二级联动在遍历省级基础上又多了些步骤
具体实现步骤如下：
1.创建一个数组，用于存放市级数据
2.给省级下拉框绑定事件
3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中
4.遍历市级数据
代码实现

 // 1.创建一个数组，用于存放市级数据var shiArr = []// 2.给省级下拉框绑定事件,onchang(当省级数据变化时，触发该事件)sheng.onchange = function () {//清空市级中的数据，防止数据的叠加shi.innerHTML="<option value=\"\">---请选择---</option>"// 3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中for (var i = 0; i < data.length; i++) {if (data[i].code == this.value) {shiArr = data[i].children;break;}}// 4.遍历市级数据for (var j = 0; j < shiArr.length; j++) {var option = document.createElement("option");option.innerHTML = shiArr[j].name;option.value = shiArr[j].code;frag.appendChild(option);}shi.appendChild(frag);}

注意：在省级数据发生变化时，要清空市级的数据，不然市级的数据会叠加在一起，所以要加上这句：

shi.innerHTML="<option value=\"\">---请选择---</option>"

四、三级联动的实现

三级联动与二级联动的实现几乎一样，注意数据发生变化时所要清空相应的数据即可。
最终代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.导入数据 --><script src="./area-json.js"></script>
</head>
<body><!-- 2.在body标签创建三个下拉框 --><select name="" id="sheng"><option value="">---请选择---</option></select><select name="" id="shi"><option value="">---请选择---</option></select><select name="" id="qu"><option value="">---请选择---</option></select>
</body>
<script>// 3.分别获取这三个下拉框var sheng = document.getElementById("sheng");var shi = document.getElementById("shi");var qu = document.getElementById("qu");var frag = document.createDocumentFragment();// 4.遍历数据for (var i = 0; i < data.length; i++) {console.log(data[i]);var option = document.createElement("option");option.innerHTML = data[i].name;option.value = data[i].code;frag.appendChild(option);}// 5.添加到省级下拉框中sheng.appendChild(frag);// 1.创建一个数组，用于存放市级数据var shiArr = []// 2.给省级下拉框绑定事件,onchang(当省级数据变化时，触发该事件)sheng.onchange = function () {//清空市级与区级中的数据，防止重复shi.innerHTML="<option value=\"\">---请选择---</option>"qu.innerHTML="<option value=\"\">---请选择---</option>"// 3.遍历数据，将遍历的数据与当前的省作比较，将相对应的市级数据存放到数组中for (var i = 0; i < data.length; i++) {if (data[i].code == this.value) {shiArr = data[i].children;break;}}// 4.遍历市级数据for (var j = 0; j < shiArr.length; j++) {var option = document.createElement("option");option.innerHTML = shiArr[j].name;option.value = shiArr[j].code;frag.appendChild(option);}shi.appendChild(frag);}var quArr = []shi.onchange = function () {qu.innerHTML="<option value=\"\">---请选择---</option>"for (var i = 0; i < shiArr.length; i++) {if (shiArr[i].code == this.value) {quArr = shiArr[i].children;break;}}for (var j = 0; j < quArr.length; j++) {var option = document.createElement("option");option.innerHTML = quArr[j].name;option.value = quArr[j].code;frag.appendChild(option);}qu.appendChild(frag);}
</script>
</html>

【经典面试题】如何使用js实现省市区三级联动相关推荐

js实现省市区三级联动(三个下拉框实现)
js实现省市区三级联动(一个下拉框实现.页面可以多次引用) html代码: 您选择的是: <input type="text" value="" id=& ...
纯js实现省市区三级联动
纯js实现省市区三级联动话不多说,直接上整篇代码 <!DOCTYPE html> <html lang="en"> <head><met ...
原生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 ...
HTML+JS实现省市区三级联动亲测可用
在线调试预览地址 https://codepen.io/acelibin/pen/wGooev 1.html代码 html><head></head><body&g ...
JS 的省市区三级联动
JS省市县级联动页面上使用的是<select class="form-control" id="cmbProvince" name="cmbP ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

【经典面试题】如何使用js实现省市区三级联动

一、省市区数据获取

二、遍历省级数据

三、二级联动的实现

四、三级联动的实现

【经典面试题】如何使用js实现省市区三级联动相关推荐

最新文章

热门文章