欢迎来访~

无限级联菜单

个人展示 管理员 4浏览 0评论
<!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>