js 实现省市级联

关注

原创最新推荐文章于 2026-05-19 06:14:43 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

使用JSON方式实现省市级联效果(JavaScript) 1. 任务要求 1）理解JSON的概念； 2）掌握JSON对象的定义以及使用； 3）如何使用JSON存储城市信息； 4）如何页面加载时，遍历JSON数据，并将JSON数据渲染到页面； 5）如何使用JSON实现下拉框联动。 2. 需求说明制作如下图所示的页面，页面加载时第一个下拉框显示所有的省的信息，当第一个下拉框选择数据后，第二个下拉框中显示对应省份的城市数据。 3. 实现思路 ... 阅读详情

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
        var shengArr =new Array();
        shengArr["广东"]=["广州","深圳","珠海","汕头","韶关"] ;
        shengArr["湖南"]=["长沙","张家界","株洲","怀化","常德"] ;
        shengArr["湖北"]=["武汉","荆州","宜昌","黄冈","仙桃"] ;
        shengArr["安徽"]=["合肥","黄山"] ;
        shengArr["河南"]=["郑州","信阳","洛阳"] ;

        function getSheng(){
            var s =document.getElementById("sheng");

            for(var v in shengArr){
                s.add(new Option(v,v),null);
            }
        }
        function getCity(){
            var s =document.getElementById("sheng");
            var c =document.getElementById("city");
            var v=s.value;
            c.options.length =0;

            for(var i in shengArr[v]){ 
                c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
            }
        }
    </script>

    <!--页面加载时获取 省名-->
    <body onload="getSheng()">  

        <!-- 改变省时匹配该省的城市名-->
        省：<select id="sheng" onchange="getCity()"> 
            <option>--请选择</option>
        </select>
        市：<select id="city"></select>
    </body>
</html>