当前位置：网站首页>js原生代码实现三级联动效果

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

2022-04-22 12:25:00 【云墨-款哥的博客】

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>

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

  1. 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事件，这里要着重提示一下：

  1. 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);
        }
    }

版权声明
本文为[云墨-款哥的博客]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_56026872/article/details/116058188

边栏推荐

猜你喜欢

随机推荐