省市区三级联动

Whnist

于 2023-01-16 12:28:49 发布

阅读量395

点赞数

文章标签： javascript html 前端 css

本文链接：https://blog.youkuaiyun.com/Meg_Fu/article/details/128702843

版权

该代码示例展示了如何使用HTML和JavaScript创建一个三级联动的下拉菜单，分别代表省级、市级和区级。当选择上级菜单时，下级菜单会自动更新其内容，取消选择时，下级选项会消失。实现方法主要依赖于DOM操作和事件监听。

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

内容
通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配;选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
原理
用‘add(new Option(“文本”,“值”))’来增加选项
代码

<!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>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
	</style>
</head>
<body>
    <select name="" id="province">
        省:<option value="">请选择</option>
    </select>
    
    <select name="" id="city">
        市:<option value="">请选择</option>
    </select>
    
    <select name="" id="district">
        区:<option value="">请选择</option>
    </select>
    <script>
        var province=document.getElementById("province")
        var city=document.getElementById("city")
        var district=document.getElementById("district")
        //设置省份+市
        var provinces=[]
        provinces["江苏省"]=["常州市","扬州市","南京市"]
        provinces["江西省"]=["南昌市","赣州市","宜春市"]
        //设置区
        var citys=[]
        citys["常州市"]=["武进区","天宁区","新北区","钟楼区"]
        citys["扬州市"]=["广陵区","邗江区","江都区","仪征市"]
        citys["南京市"]=["玄武区","秦淮区","鼓楼区","建邺区"]
        citys["南昌市"]=["进贤县","南昌县","新建区","安义县"]
        citys["赣州市"]=["瑞金","于都县","兴国县","信丰县"]
        citys["宜春市"]=["丰城县","高安","樟树","铜鼓县"]
        //添加一个选项   obj.add(new Option("文本","值"));
        for(p in provinces){
            province.add(new Option(p,p));
        }
        province.onchange=function(){
            var value=province.value
            city.innerHTML = '<option value="">请选择</option>'
            district.innerHTML = '<option value="">请选择</option>'
            for(p in provinces){
                if(value==p){
                    for(c in provinces[p]){
                        city.add(new Option(provinces[p][c],provinces[p][c]))
                    }
                }
            }
        }
        city.onchange=function(){
            district.innerHTML = '<option value="">请选择</option>'
            var value2=city.value
            for(c2 in citys){
                if(value2==c2){
                    for(d in citys[c2]){
                        district.add(new Option(citys[c2][d],citys[c2][d]))
                    }
                }
            }
        }
    </script>
</body>
</html>

效果
在这里插入图片描述