利用原生JS实现省市区三级联动（详解）

最新推荐文章于 2024-06-16 14:06:27 发布

小苏(º﹃º )

最新推荐文章于 2024-06-16 14:06:27 发布

阅读量1w

点赞数 38

分类专栏： javascript 文章标签： javascript html

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

版权

本文详细介绍了如何使用原生JavaScript实现省市区三级联动。首先遍历省级数据，然后在HTML中创建三个下拉框，并绑定事件。接着实现二级联动，当选择省份时更新市级数据，最后实现三级联动，确保在数据变化时正确清除和更新数据。

摘要由CSDN通过智能技术生成

省市区数据链接
提取码: bv3t

我们先看看效果图：
在这里插入图片描述

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"