1.遍历省级数据

我们先看看部分数据：
在这里插入图片描述
我们可以通过以下几步来遍历省级数据：
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>

效果如下所示：
在这里插入图片描述

2.二级联动的实现

二级联动在遍历省级基础上又多了些步骤
具体实现步骤如下：
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>"

3.三级联动的实现

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

<!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>

最终效果如下所示：
在这里插入图片描述
觉得对你有帮助，点个赞再走吧！

原文链接：https://blog.csdn.net/qq_45850095/article/details/116054345