省市联动的简单实现

最新推荐文章于 2021-07-19 20:57:46 发布

北漂程序员-阿力

最新推荐文章于 2021-07-19 20:57:46 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：省市联动-JS

本文链接：https://blog.youkuaiyun.com/qq_24082497/article/details/51930861

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的省市联动选择器实现方案，适用于初学者快速上手。通过JavaScript动态生成下拉菜单，并根据省份的选择实时更新对应的城市列表。

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

省市联动简单实现，适合初学者参考

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>三级联动</title>
        <script type="text/javascript">


            var provinceArr=['新疆','山东','上海'];
            var city=[
                ['乌鲁木齐','库尔勒','伊犁','喀什','和田'],
                ['济南','潍坊','青岛','烟台'],
                ['浦东','闵行','南汇']
            ];
            window.onload=function(){

                var body=document.getElementById('container');
                //添加省
                addSelect(body,'provinces',provinceArr);
                //省select对象
                var provincesObj =document.getElementById('provinces');
                //添加城市
                addSelect(body,'city',city[0]);
                //时间处理
                provincesObj.onchange=function(){
                    var cityObj =document.getElementById('city');
                    if(cityObj!=null){
                        body.removeChild(cityObj);
                    }
                    addSelect(body,'city',city[this.value]);
                };

            }

            function addSelect(element,id,arr){
                var selectElem=document.createElement('select');
                selectElem.id=id;
                for(var opt in arr){
                    var optionObj=document.createElement('option');
                    optionObj.value=opt;
                    var optionText=document.createTextNode(arr[opt]);
                    optionObj.appendChild(optionText);
                    selectElem.appendChild(optionObj);
                }       
                element.appendChild(selectElem);
            }

        </script>

        <style type="text/css">
            body,select,option{
                margin: 0;
                padding: 0;
            }
            #container{
                width: 300px;
                height: 200px;
                margin: 40px auto;
                font: 14px "微软雅黑";
            }
            select{
                width: 120px;
                margin: 10px;
                height: 30px;
                line-height: 30px;
                font: 15px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <div id="container">

        </div>

    </body>

</html>