纯js代码实现省市二级联动

最新推荐文章于 2025-06-03 19:48:34 发布

林小康

最新推荐文章于 2025-06-03 19:48:34 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/weixin_39877284/article/details/81592611

javaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的省市二级联动效果。通过简单的HTML结构和JavaScript代码，当用户选择省份时，会自动更新显示对应的城市选项。适用于网页表单中需要地区选择的场景。

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

纯js代码实现省市二级联动

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>二级联动</title>
        <script>
            function test() {
                var optionobj = null;
                var selectobj1 = document.createElement("select");
                var selectobj2 = document.createElement("select");
                document.body.appendChild(selectobj1);
                document.body.appendChild(selectobj2);
                var arr = ["--选择省份--", "湖北", "湖南", "河北", "河南"];
                var arr1 = ["武汉", "黄石", "荆州", "黄冈"];
                var arr2 = ["岳阳", "衡阳市", "益阳", "怀化市"];
                var arr3 = ["石家庄", "张家口", "秦皇岛", "邢台"];
                var arr4 = [".郑州", "洛阳", "开封", "许昌"];

                function addChild(obj, arr) {
                    for(var i = 0; i < arr.length; i++) {
                        var optionobj = document.createElement("option");
                        optionobj.innerHTML = arr[i];
                        obj.appendChild(optionobj);
                    }
                }

                addChild(selectobj1, arr); //创建省份下拉列表
                // 给省份下拉列表添加改变值的方法
                selectobj1.onchange = function() {
                    for(var i = selectobj2.children.length - 1; i >= 0; i--) {
                        selectobj2.children[i].remove();
                    }
                    switch(selectobj1.selectedIndex) {
                        case 1:
                            addChild(selectobj2, arr1);
                            break;
                        case 2:
                            addChild(selectobj2, arr2);
                            break;
                        case 3:
                            addChild(selectobj2, arr3);
                            break;
                        case 4:
                            addChild(selectobj2, arr4);
                            break;

                    }
                }
            }
        </script>
    </head>

    <body onload="test()">
    </body>

</html>