js之dom二级联动

最新推荐文章于 2022-04-12 20:52:55 发布

欣欣向荣q77

最新推荐文章于 2022-04-12 20:52:55 发布

阅读量510

点赞数 2

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

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

版权

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

2 篇文章 0 订阅

订阅专栏

二级联动

说明,此文使用原生 js 实现二级联动,有需要者自行取用

数据结构代码块

        var data = {
            河南省:{
                郑州市:['金水区','二七区','中牟县'],
                漯河市:['郾城区','源汇区','召陵区'],
                洛阳市:['西工区','吉利区','洛龙区']
            },
            浙江省:{
                杭州市:['拱墅区','西湖区','萧山区'],
                宁波市:['江东区','江北区','北仑区'],
                温州市:['鹿城区','龙湾区','洞头区']
            }
        }

初始化模块

//首先先创建两个下拉选框
    <select name="" id="province"></select>
    <select name="" id="citys"></select>
//然后初始化省市
        var pro = document.querySelector('#province');
        var citys = document.querySelector('#citys');

        for (var k in data) {
            var opin = document.createElement('option')
            opin.innerHTML = k;
            pro.appendChild(opin);
        }
        
        city_data = pro_filter()
        city_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)
            }
        }

然后添加改变监听事件

        pro.onchange = function () {
            city_data = pro_filter()
            city_render()
        }

最后附上完整版代码

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

    <script>
        var data = {
            河南省: {
                郑州市: ['金水区', '二七区', '中牟县'],
                漯河市: ['郾城区', '源汇区', '召陵区'],
                洛阳市: ['西工区', '吉利区', '洛龙区']
            },
            浙江省: {
                杭州市: ['拱墅区', '西湖区', '萧山区'],
                宁波市: ['江东区', '江北区', '北仑区'],
                温州市: ['鹿城区', '龙湾区', '洞头区']
            }
        }
        var pro = document.querySelector('#province');
        var citys = document.querySelector('#citys');
        //初始化省份信息
        for (var k in data) {
            var opin = document.createElement('option')
            opin.innerHTML = k;
            pro.appendChild(opin);
        }
        //初始化城市信息
        var city_data = pro_filter()
        city_render()
        //给省份添加改变的监听,当省份改变时,对应城市跟着发生改变
        pro.onchange = function () {
            city_data = pro_filter()
            city_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)
            }
        }

    </script>

</body>

</html>

总结

喜欢作者的多多点赞支持,首页还有三级联动的文章

欣欣向荣q77

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js之dom二级联动

二级联动说明,此文使用原生 js 实现二级联动,有需要者自行取用数据结构代码块 var data = { 河南省:{ 郑州市:['金水区','二七区','中牟县'], 漯河市:['郾城区','源汇区','召陵区'], 洛阳市:['西工区','吉利区','洛龙区'] }, 浙江省:{ 杭州
复制链接

扫一扫

专栏目录