javascript实现的功能--二级联动-优快云博客

<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.οnlοad=function(){
            createSheng();
            //触发事件
            $('sheng').οnchange=createShi;
        }
    </script>
</head>
<body>
    <select id='sheng'></select>
    <select id='shi'></select>
</body>
</html>