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

时间：2021-08-16 03:54:00
<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>

相关文章