用javascript 制作级联下拉菜单（三级）

最新推荐文章于 2020-12-22 21:36:10 发布

海马体加强中

最新推荐文章于 2020-12-22 21:36:10 发布

阅读量1.9k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_38722696/article/details/109627187

版权

本文详细介绍了如何使用JavaScript创建具有三级结构的级联下拉菜单，通过实例代码展示了从数据结构到交互效果的完整实现过程，帮助读者理解动态构建和更新下拉选项的方法。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 制作级联下拉菜单（三级） -->
     <select name="province">
         <option value="请选择省">请选择省</option>
     </select>   

    <select name="city">
        <option value="请选择市">请选择市</option>
    </select> 
    <select name="area">
        <option value="请选择区">请选择区</option>
    </select> 
    <script>
        //创建对应的数据
        var ar1=[{
            name:'广州省',cityList:[{
                name:'深圳市',areaList:['天河区','白云区','越秀区','增城区']
            },{
                name:'深圳市',areaList:['宝安区','龙华区','福田区','南山区']
            },{
                name:'东莞市',areaList:['东莞一区','东莞二区']
            }]
        },{
            name:'江西省',cityList:[{
                name:'南昌市',areaList:['青山湖区','高兴区']
            },{
                name:'赣州市',areaList:['章贡区','荣江区']
            }]
        },{
            name:'湖南省',cityList:[{
                name:'长沙市',areaList:['雨花区','岳麓区','开福区']
            },{
                name:'怀化市',areaList:['特北区','怀化一区']
            }]
        },{
            
            name:'天津市',cityList:[{
                name:'天津市',areaList:['南开区','北辰区','东丽区','河东','河西','宝坻','蓟州','和平区','河北','红桥','武清','西青','宁河','静海','滨海新区','津南']
            }]
        }
        ]


        //获取操作对象
        var pro=document.querySelector('[name="province"]')
        var city=document.querySelector('[name="city"]')
        var area=document.querySelector('[name="area"]')
       
        //把所有省份添加到pro对象中
        for(var i in ar1){
           //创建选项
           var opt=document.createElement('option')
           //给当前对象设置value属性值
           opt.value=ar1[i].name
           //给当前对象添加文本内容
           opt.innerHTML=ar1[i].name
           //把新元素追加到指定父级中
           pro.appendChild(opt)
        }


        //给省份对象绑定onchange事件
        pro.onchange=function(){
            //保留当前第一个选项
            city.options.length=1
            area.options.length=1
            //获取当前被选中的省份对象
            var p1=this.value
            //遍历所有数据
            for(var i in ar1){
                //判断当前省份是否等于被选中的省份
                if(p1==ar1[i].name){
                    //满足条件以后再获取该省份对应的城市,并遍历
                    for(var j in ar1[i].cityList){
                        //创建选项
                        var opt=document.createElement('option')
                        //给当前对象设置value属性值
                        opt.value=ar1[i].cityList[j].name
                        //给当前对象添加文本内容
                        opt.innerHTML=ar1[i].cityList[j].name
                        //把新元素追加到指定父级中
                        city.appendChild(opt)
                    }
                }
            }
        }


        //给城市绑定一个onchange事件
        city.onchange=function(){
            //保留当前第一个选项
            area.options.length=1
            //获取当前被选中的省份对象
            var proValue=pro.value
            //获取被选中的城市
            var cityValue=this.value
            //遍历所有数据
            for(var i in ar1)
            //判断当前省份是否等于被选中的省份
            if(proValue==ar1[i].name){
                //满足条件以后再获取该该省份对应的城市，并遍历
                for(var j in ar1[i].cityList){
                    //判断是否等于被选中的城市
                    if(cityValue==ar1[i].cityList[j].name){
                    //满足条件以后再获取该省份对应的的城市，并遍历
                        for(var z in ar1[i].cityList[j].areaList){
                        //创建选项
                        var opt=document.createElement('option')
                        //给当前对象设置value属性值
                        opt.value=ar1[i].cityList[j].areaList[z]
                        //给当前对象添加文本内容
                        opt.innerHTML=ar1[i].cityList[j].areaList[z]
                        //把新元素追加到指定的父级中
                       area.appendChild(opt)
                    }
                }
            }
        }
    }  
    </script>
</body>
</html>