省市区三级联动练习

最新推荐文章于 2024-07-26 17:54:04 发布

阳光里的我们

最新推荐文章于 2024-07-26 17:54:04 发布

阅读量211

点赞数

分类专栏：练习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44748596/article/details/91353865

版权

练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现省市区三级联动效果。首先在HTML中创建页面元素，然后通过JSON模拟后台数据，最后利用JavaScript动态添加下拉列表并监听选择事件，实现不同级别下拉列表之间的联动。

摘要由CSDN通过智能技术生成

1.先写body里的元素，画页面

省：<select name="" id="a">
    <option value="">--请选择--</option>
</select>
市：<select name="" id="b">
    <option value="">--请选择--</option>
</select>
区：<select name="" id="c">
    <option value="">--请选择--</option>
</select>

2，关联数据，（用json写的数据模拟后台数据）

 var city = [
        {
            name: "陕西省",
            child: [
                {
                    name: "西安市",
                    child: [
                        {
                            name: "高新区"
                        },
                        {
                            name: "未央区"
                        },
                        {
                            name: "莲湖区"
                        }
                    ]
                },
                {
                    name: "宝鸡市",
                    child: [
                        {
                            name: "高新区"
                        },
                        {
                            name: "成仓区"
                        },
                        {
                            name: "渭滨区"
                        }
                    ]
                }
            ]
        },
        {
            name: "随便省",
            child: [
                {
                    name: "随便市1",
                    child: [
                        {
                            name: "随便区11"
                        },
                        {
                            name: "随便区12"
                        },
                        {
                            name: "随便区13"
                        }
                    ]
                },
                {
                    name: "随便市2",
                    child: [
                        {
                            name: "随便区21"
                        },
                        {
                            name: "随便区22"
                        },
                        {
                            name: "随便区23"
                        }
                    ]
                }
            ]
        }
    ];

3，js添加相对应的下拉列表及选择事件

1，获取body里面的相关元素

  var a=document.getElementById("a");
    var b=document.getElementById("b");
    var c=document.getElementById("c");

2，给a添加相关省

   for(var i=0;i<city.length;i++){
       var opt=new Option(city[i].name,i);//option(text,value) 存储value有利于选取下一级的元素
       a.appendChild(opt);
   }

3，选择a的省，b的下拉列表为相关市

a.onchange=function(){
    var index=this.value;
    s=city[index].child;//
    b.options.length=1;//options是b的option集合数组,b.options.length=1清空上一次a.onchange的a选项
    for(var i=0;i<s.length;i++){
        var opt=new Option(s[i].name,i);
        b.appendChild(opt);
    }
};

4, 选择b的市，c的下拉列表为相关区

b.onchange=function(){
    var index=this.value;
    c.options.length=1;
//    console.log(s[index].child);
    for(var i=0;i<s[index].child.length;i++){
        var opt=new Option(s[index].child[i].name,i);
        c.appendChild(opt);
    }
}