频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
简易的省市二级联动
2017-08-11 09:11:00      个评论    来源:flyflyfly88的博客  
收藏   我要投稿

简易的省市二级联动

<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>

 

点击复制链接 与好友分享!回本站首页
上一篇:正则表达式使用规则
下一篇:web项目jdk mysql tomcat redis nginx memcache linux部署细节
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站