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

燕穗子博客

已于 2022-06-09 22:00:23 修改

阅读量1.3k

点赞数 3

分类专栏： IT面试 JavaScript 文章标签： javascript vue.js 前端前端框架面试

于 2022-05-17 11:04:01 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124816854

版权

IT面试同时被 2 个专栏收录

96 篇文章 36 订阅

订阅专栏

JavaScript

68 篇文章 13 订阅

订阅专栏

一、省市区数据获取

链接: 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>

燕穗子博客

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
【经典面试题】如何使用js实现省市区三级联动

目录一、省市区数据获取二、遍历省级数据三、二级联动的实现四、三级联动的实现一、省市区数据获取链接: https://pan.baidu.com/s/1AqXINno57a3og0oVYZCn0g?pwd=6beh 提取码: 6beh效果展示二、遍历省级数据 1.导入数据 2.在body标签创建三个下拉框 3.分别获取这三个下拉框 4.遍历数据 5.添加到省级下拉框中代码实现二级联动在遍历省级基础上又多了些步骤具体实现步骤...
复制链接

扫一扫