Javascript如何实现无限级菜单联动实例

来源：互联网发布：php项目开发常用方法编辑：程序博客网时间：2024/06/05 14:15
<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8" />        <title>示例4</title>        <script>            var data=[                {"id":10,"name":'男装',                    "sub":[{"id":101,"name":'正装'},                           {"id":102,"name":'T恤'},                           {"id":103,"name":'裤衩'}                          ]                },                {"id":20,"name":'女装',                    "sub":[{"id":201,"name":'短裙'},                           {"id":202,"name":'连衣裙'},                           {"id":203,"name":'裤子',                                "sub":[{"id":2031,"name":'长裤'},                                       {"id":2031,"name":'九分裤'},                                       {"id":2031,"name":'七分裤'}                                      ]                           }                          ]                }            ];          </script>    </head>    <body>        <script>            //创建<select></select>元素            var sel0=document.createElement("select");            document.body.appendChild(sel0);            //在一级菜单中增加默认选项："-请选择-"            sel0.add(new Option("-请选择-",0));            for(var i=0;i<data.length;i++){                //遍历data数组，在一级菜单下增加option                sel0.add(new Option(data[i].name,data[i].id));            }            sel0.onchange=function(){                var index=sel0.selectedIndex-1;                while(document.body.lastChild!=sel0){                    document.body.removeChild(document.body.lastChild);                }//一级选项发生变化，则删除所有后续select                loadSub(data[index]);            };            function loadSub(parent){//加载任意父对象的sub                if(parent&&parent.sub){                    //如果父元素有效，且包含sub，则创建子select                    var sel=document.createElement("select");                    document.body.appendChild(sel);                    var subs=parent.sub;//获得子数组                    sel.add(new Option("-请选择-",0));                     for(var i=0;i<subs.length;i++){                        sel.add(new Option(subs[i].name,subs[i].id));                    }                    sel.onchange=function(){                    //任意一级select发生变化，都先清空下级select                        while(document.body.lastChild!=this){                                                    document.body.removeChild(document.body.lastChild);                        }                        var index=this.selectedIndex-1;                        //parent表示当前select的上级                        //parent.sub表示当前select中的所有选项                    //parent.sub[i]表示当前select中选中的选项                        var sub=parent.sub[index];                       //将当前选中的对象，作为父对象，继续找sub                        loadSub(sub);//递归函数调用                    }                }            }        </script>    </body></html>
运行结果如下：
这里写图片描述
0 0