JavaScript选项菜单（select-option）联动

最新推荐文章于 2023-07-09 09:38:20 发布

LLM(-¥-)

最新推荐文章于 2023-07-09 09:38:20 发布

阅读量508

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_51073424/article/details/116885788

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市选项菜单联动</title>
    <style>
 
    </style>
    <script>
    let datas=
    [
        {"pid":1, "pname":"北京","cities":
        [
           { "cid":1,"cname":"定海区"},
           {"cid":2,"cname":"丰台区"},
           {"cid":3,"cname":"大兴区"}
        ]
        },
        {"pid":2, "pname":"广西","cities":
        [
           { "cid":1,"cname":"桂林"},
           {"cid":2,"cname":"北海"},
           {"cid":3,"cname":"百色"}
        ]
        },
        {"pid":3, "pname":"广州","cities":
        [
           { "cid":1,"cname":"佛山"},
           {"cid":2,"cname":"深圳"},
           {"cid":3,"cname":"乐山"}
        ]
        },
        {"pid":4, "pname":"安徽","cities":
        [
           { "cid":1,"cname":"合肥"},
           {"cid":2,"cname":"芜湖"},
           {"cid":3,"cname":"游州"}
        ]
        },
        {"pid":5, "pname":"湖南","cities":
        [
           { "cid":1,"cname":"长沙"},
           {"cid":2,"cname":"湘潭"},
           {"cid":3,"cname":"岳阳"}
        ]
        }
    ];
    
    /*窗口加载事件*/
    window.addEventListener('load',function(){
        initProvince();
        //获取城市选项卡
        let provinceTag = document.querySelector("#provinceTag");
        //获取选项卡下标
        let sindex = provinceTag.selectedIndex;
        //获取省份id
        let pid = provinceTag.options[sindex].value;
        //初始化城市
        initCity(pid);
        //设置选项卡变化监听事件
        window.addEventListener('change',function(){
            let provinceTag = document.querySelector("#provinceTag");
            let sindex = provinceTag.selectedIndex;
            let pid = provinceTag.options[sindex].value;
            initCity(pid);
        });

    });
      
    /*城市初始化*/
    function initCity(pid){
        let cities=null;
        let cityTag=document.querySelector("#cityTag");
        for(let i = 0; i<datas.length;i++){
            if(datas[i].pid==pid){
                cities=datas[i].cities;
                break;
            }
        } 
        if(cities!=null){
                //清空原数据;
                cityTag.options.length=0;
                for(let i=0;i<cities.length;i++){
                    //创建城市选项
                    let op =document.createElement('option');
                    //初始化城市选项
                    op.text = cities[i].cname;
                    op.value = cities[i].cid;
                    //添加选项
                    cityTag.options.add(op);
                }
            }
      }

    /*初始化省份*/
    function initProvince(){
        for(let i=0;i<datas.length;i++){
        let pro=datas[i];
        let pid = pro.pid;
        let pname = pro.pname;
        //创建选项
        let op =document.createElement("option");
        op.text=pname;
        op.value=pid;
        //找到省的下拉框
        let provinceTag = document.querySelector("#provinceTag");
        provinceTag.options.add(op);
        }
    }
    </script>
</head>
<body>
    <select id="provinceTag">
      
    </select>
    <select id="cityTag">
      
    </select>
    
</body>
</html>

在这里插入图片描述

LLM(-¥-)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript选项菜单（select-option）联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>省市选
复制链接

扫一扫