首页 > 编程语言 > 详细

javascript实现的功能--二级联动

时间:2015-11-10 01:30:24      阅读:303      评论:0      收藏:0      [点我收藏+]
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>面向对象</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <script>
        //定义省得相关信息
        var sheng=[‘请选择‘,‘广东省‘,‘湖南省‘,‘湖北省‘];
        //定义是的相关信息
        var shi = [[],[‘广州市‘,‘东莞市‘,‘珠海市‘],[‘长沙市‘,‘株洲市‘,‘湘潭市‘],[‘武汉市‘,‘宜昌市‘,‘荆门市‘]];
        //封装一个DOM对象
        function $(id){
            return document.getElementById(id);
        }

        function createSheng(){
        //遍历一维数组
            for(var i in sheng){
            //定义op对象
                var op=new Option(sheng[i],i);
                //追加元素到下拉列表
                $(‘sheng‘).options.add(op);
            }
        }
        function createShi(){
        //获取省得索引信息
            var index=$(‘sheng‘).selectedIndex;
            //清除市的下拉选框
            $(‘shi‘).length=0;
            //遍历市的相关信息
            for(var i in shi[index]){
                var op =new Option(shi[index][i],i);
                //追加元素
                $(‘shi‘).options.add(op);
            }
        }
        //定义一个window.onload事件
        window.onload=function(){
            createSheng();
            //触发事件
            $(‘sheng‘).onchange=createShi;
        }
    </script>
</head>
<body>
    <select id=‘sheng‘></select>
    <select id=‘shi‘></select>
</body>
</html>

 

javascript实现的功能--二级联动

原文:http://www.cnblogs.com/IT-Computer-TcpIp/p/4951696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!