<!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>