js原生代码实现三级联动效果

最新推荐文章于 2023-11-25 20:58:06 发布

云墨-款哥的博客

最新推荐文章于 2023-11-25 20:58:06 发布

阅读量409

点赞数 11

分类专栏： DOM事件 JavaScript 文章标签： js html5 前端 es6 javascript

本文链接：https://blog.csdn.net/m0_56026872/article/details/116058188

版权

JavaScript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

DOM事件

7 篇文章 0 订阅

订阅专栏

js原生代码实现三级联动效果

在很多网站中我们都会遇到一个模块，比如当我们注册信息填家庭地址的时候，或者我们进入一个商城的本地模式的时候，还有我们填写快递地址的时候，当我们选择了国家，对应的省份就会在下一个框中出现，我们选择了省份，城市就会在下一个框中出现，以此类推

有关三级联动的问题，我还用vue的computed属性写了一个vue版本，大家可以看一下这篇博客Vue版三级联动

这是我用到的数据，具体的数据文件我已经上传至我的资源库city_code.js

<script src="./city_code.js"></script>

下面是唯品会上的一个例子截图，我们选择了河南省之后，下一栏城市中就会出现河南的地市，并且默认选中郑州
在这里插入图片描述

下面是简单的HTML结构，在这里我使用了三个select下拉框来表示对应的省、市、区
并给他们添加对应的id

<body>
    <select name="" id="province"></select>
    <select name="" id="city"></select>
    <select name="" id="area"></select>
</body>

**第一开始我们先给三个下拉框赋初识值，在初始状态下，我们应当显示的是北京市，市辖区，东城区，即每一个数据数组中的对应的第一个这里要着重提示一下：

selectedIndex这个属性表示的是选中的option的索引，默认选中的索引都为零**

// 获取元素
    var province = document.getElementById('province');
    var city = document.getElementById('city');
    var area = document.getElementById('area');

    // 初始状态
    // 插入省 遍历data数组
    for (let i = 0; i < data.length; i++) {
        var option = document.createElement('option');
        option.innerHTML = data[i].name;
        province.appendChild(option);
    }
    // 插入市  遍历city数组
    var provinceId = province.selectedIndex;
    for (let i = 0; i < data[provinceId].city.length; i++) {
        var option = document.createElement('option');
        option.innerHTML = data[provinceId].city[i].name;
        city.appendChild(option);
    }
    // 插入区  遍历area数组
    var cityId = city.selectedIndex;
    for (let i = 0; i < data[provinceId].city[cityId].area.length; i++) {
        var option = document.createElement('option');
        option.innerHTML = data[provinceId].city[cityId].area[i].name;
        area.appendChild(option);
    }

**当我们点击选择对应的省份时，我们的第二个select下的option应该为我们选中的省份下的对应城市，区域应该变成该省份的第一个城市下的所有区（默认），因此，我们给省对应的select绑定onchange事件，这里要着重提示一下：

selectedIndex这个属性表示的是选中的option的索引
2.每次更新之前要清空原有的数据 **

 // 给表示省份的select绑定onchange事件
    province.onchange = function(){
        // 清空表示城市的select中原有的内容
        city.innerHTML = '';
        // 清空表示区的select中原有的内容
        area.innerHTML = '';
        // province.selectedIndex  当前选中的option的索引
        provinceId = province.selectedIndex;
        // 更新市
        if (data[provinceId].city) {
            for (let i = 0; i < data[provinceId].city.length; i++) {
                var option = document.createElement('option');
                option.innerHTML = data[provinceId].city[i].name;
                city.appendChild(option);
            }
            // 更新区
            for (let i = 0; i < data[provinceId].city[cityId].area.length; i++) {
                var option = document.createElement('option');
                option.innerHTML = data[provinceId].city[cityId].area[i].name;
                area.appendChild(option);
            }
        }
    }

当我们点击选择对应的城市时，我们的第三个select下的option应该为我们选中的城市下的对应省份

// 给表示城市的select绑定onchange事件
    city.onchange = function(){
        // 清空表示区的select中原有的内容
        area.innerHTML = '';
        // 更新区
        for (let i = 0; i < data[provinceId].city[city.selectedIndex].area.length; i++) {
            var option = document.createElement('option');
            option.innerHTML = data[provinceId].city[city.selectedIndex].area[i].name;
            area.appendChild(option);
        }
    }

云墨-款哥的博客

关注

11
点赞
踩
12

收藏

觉得还不错? 一键收藏
9
评论
js原生代码实现三级联动效果

js原生代码实现三级联动效果在很多网站中我们都会遇到一个模块，比如当我们注册信息填家庭地址的时候，或者我们进入一个商城的本地模式的时候，还有我们填写快递地址的时候，当我们选择了国家，对应的省份就会在下一个框中出现，我们选择了省份，城市就会在下一个框中出现，以此类推这里使用的数据是一个js文件，看到的小伙伴提示一下怎么能上传上去，我对博客不太熟悉<script src="./city_code.js"></script>下面是唯品会上的一个例子截图，我们选择了河南省之后，下一
复制链接

扫一扫