damo7

将来Severus

已于 2023-01-21 14:44:23 修改

阅读量116

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2023-01-16 23:29:59 首次发布

本文链接：https://blog.youkuaiyun.com/qq_74103873/article/details/128709303

版权

JavaScript 专栏收录该内容

17 篇文章

订阅专栏

该文介绍了一个使用JavaScript和DOM操作实现的省市区三级联动下拉菜单的效果。通过数组存储各级数据，监听select元素的change事件，动态更新下级菜单内容。当上级选项被取消时，次级选项会自动清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

省市区三级联动

需求：

通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级
当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成
当我取消上一级菜单的选项时，次一级选项会自动消失

实现原理：
用数组配合下拉菜单实现，通过元素绑定事件等，先给其遍历索引，用this关键字给其分配索引值，再通过清除和对应索引赋值实现点击菜单自动分配二级菜单

damo7

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box select{
            width: 70px;
            height: 30px;
            background-color: wheat;
        }
        #box option{
            line-height: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <select id="sheng">
            <option>省</option>
        </select>
        <select id="shi">
            <option>市</option>
        </select>
        <select id="qu">
            <option>区</option>
        </select>
    </div>
    <script> 
        var sheng = document.getElementById("sheng")
        var shi = document.getElementById("shi")
        var qu = document.getElementById("qu")
        // 录入省市区数组
        var sheng_change = ["江苏","四川","浙江"]
        
        var shi_change = [
        					["南京","苏州","淮安"],
        					["成都","攀枝花","遂宁"],
        					["杭州","宁波","嘉兴"]
        				]
        
        var qu_change = [
        					[
        						["玄武","鼓楼","浦口"],
        						["吴中","姑苏","昆山"],
        						["清江浦","洪泽","涟水"]
        					],
        					[
        						["武侯","锦江","金牛"],
        						["东区","西区","仁和"],
        						["船山","安居","大英"]
        					],
        					[
        						["西湖","江赣","上城"],
        						["江北","镇海","北仑"],
        						["南湖","秀洲","海盐"]
        					]
        				]
        // 初始不对下一级菜单进行匹配
        var index = -1 
        for(var i=0;i<sheng_change.length;i++){ //遍历数组中的元素
            sheng.options.add(new Option(sheng_change[i]));
        }
        sheng.onchange = function getShi(){
            shi.options.length = 1; //添加前先给一个值
            qu.options.length = 1;
            index = this.selectedIndex - 1;
            if (index > -1) {
                for (var i = 0; i < shi_change[index].length; i++) {
                    shi.options.add(new Option(shi_change[index][i])); //对应添加到第二个下拉菜单中
                }
            }
        }
        // 和上面相同的方法
        shi.onchange = function getQu() {
        qu.options.length = 1;
        var indexs = this.selectedIndex - 1;
        if(indexs > -1) {
            for(var i = 0; i < qu_change[index][indexs].length; i++) {
                qu.options.add(new Option(qu_change[index][indexs][i]));
            }
        }      
    }
    </script>
</body>
</html>