javaScript:HTML DOM实现省市区级联菜单

效果图：

注意点:在给省和市的onchange事件中，要记得对应清空市和区里面的内容

省：<select name="sheng">
        <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:['曲靖一区','曲靖二区']
            }]
        }]

        //获取所有的操作对象
        var sheng=document.querySelector('[name="sheng"]')
        var city=document.querySelector('[name="city"]')
        var area=document.querySelector('[name="area"]')

        //给省份下拉框添加省份选项
        //遍历数组元素
        for(var i=0;i<ar1.length;i++){
            //创建选项
            //option里面的value和文本内容一致
            var opt=new Option(ar1[i].name,ar1[i].name)
            //把创建的省份添加到下拉框中
            sheng.add(opt)
        }

        //给省份下拉框绑定onchange事件
        sheng.onchange=function(){
            //清空区域下拉选项
            area.options.length=1
            //清空城市下拉框中的选项
            city.options.length=1
            //获取当前被选中的省份value值
            var s1=this.value
            //遍历数组中的数据
            for(var i=0;i<ar1.length;i++){
                //判断当前遍历出来的省份是否等于被选中的省份
                if(ar1[i].name===s1){
                    //继续遍历还省份中所有城市
                    for(var j=0;j<ar1[i].citylist.length;j++){
                        //创建选项
                        var opt2=new Option(ar1[i].citylist[j].name,ar1[i].citylist[j].name)
                        //把当前选项追加到城市中
                        city.add(opt2)
                    }
                }
            }
        }
        //给城市下拉框绑定onchange事件
        city.onchange=function(){
            //清除以前的选项
            area.options.length=1
            //获取省份和城市
            var s2=sheng.value
            var c1=this.value
            for(var i=0;i<ar1.length;i++){
                //判断省份
                if(ar1[i].name==s2){
                    //遍历该省份对应的城市
                    for(var j=0;j<ar1[i].citylist.length;j++){
                        //判断城市
                        if(ar1[i].citylist[j].name==c1){
                            //遍历区域
                            for(var z=0;z<ar1[i].citylist[j].arealist.length;z++){
                                //获取区域
                                var str1=ar1[i].citylist[j].arealist[z]
                                //创建选项
                                var opt=new Option(str1,str1)
                                area.add(opt)
                            }
                        }
                    }
                }
            }
        }
    </script>