js-----二级菜单联动

来源:互联网 发布:excel数据分析函数 编辑:程序博客网 时间:2024/05/01 18:30

《开场白》
今天来看一下js的一个小例子吧!二级联动

直接上代码了,原理比较简单,还有就是暴力操作!

<!DOCTYPE html><html>    <head>        <title>联动菜单</title>        <meta charset="utf-8" />    </head>         <script>            var area = [['软件设计方向','大数据方向','云计算方向'],['通信','信息对抗']            ,['播音','编导'],['建工']];            function ld(){                var sel = document.getElementById('yuanxi');                var opt = '';                if(sel.value == '-1')                {                    document.getElementById('zhuanye').innerHTML = opt;                    return ;                 }                for (var i=0 , len=area[sel.value].length; i<len;i++)                {                    opt = opt + '<option value="'+i+'">'+area[sel.value][i]+'</option>';                }                document.getElementById('zhuanye').innerHTML = opt ;            }        </script>    <body>            <select  id="yuanxi" onchange="ld();">    <!-- onChange改变事件,得有Change(改变),才能触发该事件。  -->                    <option value="-1">--请选择--</option>                    <option value="0">软件学院</option>                    <option value="1">计算机学院</option>                    <option value="2">文法学院</option>                    <option value="3">土木学院</option>            </select>            <select id="zhuanye">            </select>    </body></html>

《结束语》
其实今天是偷了个懒,早点休息,晚安!

原创粉丝点击