js的类用之dom实现三级联动

最新推荐文章于 2022-07-14 16:57:32 发布

欣欣向荣q77

最新推荐文章于 2022-07-14 16:57:32 发布

阅读量192

点赞数

分类专栏： js基础类用文章标签： javascript

本文链接：https://blog.csdn.net/qq_52648305/article/details/124133926

版权

js基础类用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三级联动

完整版代码附上:

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

<body>
    <select name="" id="province"></select>
    <select name="" id="citys"></select>
    <select name="" id="area"></select>
    <script>
        var data = {
            河南省: {
                郑州市: ['金水区', '二七区', '中牟县'],
                漯河市: ['郾城区', '源汇区', '召陵区'],
                洛阳市: ['西工区', '吉利区', '洛龙区']
            },
            浙江省: {
                杭州市: ['拱墅区', '西湖区', '萧山区'],
                宁波市: ['江东区', '江北区', '北仑区'],
                温州市: ['鹿城区', '龙湾区', '洞头区']
            }
        }
        var pro = document.querySelector('#province');
        var citys = document.querySelector('#citys');
        var area = document.querySelector('#area');
        //初始化省份信息
        for (var k in data) {
            var opin = document.createElement('option')
            opin.innerHTML = k;
            pro.appendChild(opin);
        }
        //初始化城市信息
        var city_data = pro_filter()
        city_render();
        //初始化区信息
        var area_data = city_filter()
        area_render();

        //给省份添加改变的监听,当省份改变时,对应城市及区跟着发生改变
        pro.onchange = function () {
            city_data = pro_filter()
            city_render()
            area_data = city_filter()
            area_render();
        }
        //给城市添加监听,当城市改变时,对应区跟着改变
        citys.onchange = function(){
            area_data = city_filter()
            area_render();
        }
        //省份筛选函数 找对对应的省份,返回值是我们选中的省份
        function pro_filter() {
            //循环查找被选中的的省份
            for (let i = 0; i < pro.options.length; i++) {
                if (pro.options[i].selected) {
                    var data_value = pro.options[i].value
                    break;
                }
            }
            var city_data = data[data_value]
            //将筛选出的省份返回出去
            return city_data
        }
        //城市渲染函数
        function city_render() {
            //城市信息初始化
            citys.innerHTML = ''
            //循环渲染城市
            for (var k in city_data) {
                var opin = document.createElement('option')
                opin.innerHTML = k
                citys.appendChild(opin)
            }
        }

        //城市筛选函数 找到对应的城市,返回值是我们选中的城市
        function city_filter() {
            //循环查找被选中的的城市
            for (let i = 0; i < citys.options.length; i++) {
                if (citys.options[i].selected) {
                    var area_value = citys.options[i].value
                    break;
                }
            }
            var area_data = city_data[area_value]
            //将筛选出的城市返回出去
            return area_data
        }
        //区渲染函数
        function area_render() {
            //区信息初始化
            area.innerHTML = ''
            //循环渲染区
            for(var i = 0 ; i<area_data.length ; i++){
                var opin = document.createElement('option')
                opin.innerHTML = area_data[i]
                area.appendChild(opin)
            }
        }
    </script>

</body>

</html>

效果展示

在这里插入图片描述

思路分析

三级联动是在二级联动的基础上添加了城市的筛选和区的渲染,和二级联动比较来说,思路上都是一个筛选,一个渲染,多了两个封装的函数,此类联动做法主要是找到渲染的方法,在根据筛选的元素进行渲染就好.

欣欣向荣q77

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js的类用之dom实现三级联动

三级联动完整版代码附上:<!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"> &
复制链接

扫一扫