简易的省市二级联动-前端--易笔记

简易的省市二级联动
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var shenArr = new Array(); //声明数组
        shenArr["广东"] = ["广州","深圳","珠海","汕头"];
        shenArr["湖南"] = ["长沙","株洲","张家界","邵阳"];
        shenArr["湖北"] = ["武汉","宜昌","荆州","仙桃"];
        shenArr["安徽"] = ["合肥","黄山"];
        shenArr["河南"] = ["郑州","洛阳"];

        function getShen() {
            var s = document.getElementById("shen");
            for(var v in shenArr) {
                //document.write(arr[v] + "<br/>");
                s.add(new Option(v,v),null);//把数组键加入到省的下拉框中
            }
        }

        function getCity(){
            var s = document.getElementById("shen"); //省下拉框
            var c = document.getElementById("city"); // 市下拉框
            var v = s.value; //省市名称，也是数组中的键

            c.options.length=0;//清除当前city中的选项
            //循环把某一个省的城市加入到市的下拉框
            for(var i in shenArr[v]){
                c.add(new Option(shenArr[v][i]),null);
            }
        }
    </script>
</head>

<body onload="getShen()">
    省：<select id="shen" onchange="getCity()">
        <option value="0">--请选择--</option>
    </select>

    市：<select id="city"></select>
</body>
时间：2017/8/11 9:11:00
