原生js 城市联动

最新推荐文章于 2024-09-25 14:00:00 发布

清风徐来了吗

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量56

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46493636/article/details/118378207

版权

let cityData = [
        {id:1,name:"广东省",f_id:0},
        {id:100,name:"深圳市",f_id:1},
        {id:2001,name:"龙华新区",f_id:100},
        {id:2002,name:"龙岗区",f_id:100},
        {id:101,name:"广州市",f_id:1},
        {id:2003,name:"白云区",f_id:101}  ,
        {id:2004,name:"肇庆区",f_id:101},
        {id:2,name:"四川省",f_id:0},
        {id:200,name:"南充市",f_id:2},
        {id:20011,name:"蓬安县",f_id:200},
         {id:20021,name:"营山县",f_id:200},
        {id:3,name:"湖南省",f_id:0},
         {id:300,name:"长沙市",f_id:3},
        {id:20011,name:"蓬安县1",f_id:300},
        {id:20021,name:"营山县1",f_id:3000},
    ];

    let shen =  document.querySelector('#shen');
    console.log(shen.getAttribute('name'))
    let city =  document.querySelector('#city');
    let region =  document.querySelector('#region');

    function get_children(fid,obj) {
        let option = document.createElement('option')
        for (item of cityData){
            if(item.f_id == fid){
                obj.add(new Option(item.name,item.id))
            }
        }
        obj.addEventListener('change',function (event) {
            let children = this.options;//获取子节点
            for (child of children){
                let c = child.selected
                if(c){
                    let val = child.value;
                    let selectName = obj.getAttribute('name')
                    if(selectName == 'shen'){
                        if(val == ''){
                            region.innerHTML = '<option value="">请选择地区</option>'
                            city.innerHTML = '<option value="">请选择地区</option>'
                            return
                        }
                        region.innerHTML = '<option value="">请选择地区</option>'
                        city.innerHTML = '<option value="">请选择地区</option>'
                        get_children(child.value,city)
                    } else if(selectName == 'city'){
                        if(val == ''){
                            region.innerHTML = '<option value="">请选择地区</option>'
                            return
                        }
                        region.innerHTML = '<option value="">请选择地区</option>'
                        get_children(child.value,region)
                    } else if(selectName == 'region'){

                    }
                }
            }
        })
    }

    get_children(0,shen)