- 科技
- 原生 js 三级联动小例子
原生 js 三级联动小例子
1效果图2html3js4总结
1效果图
2html
<body>
<div id="category"></div>
</body>
3js
<script
>
var categories
=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
];
function createSel(cts
){
var sel
=document
.createElement("select");
sel
.add(new Option("-请选择-",-1));
for(var i
=0;i
<cts
.length
;i
++){
sel
.add(new Option(cts
[i
].name
,cts
[i
].id
));
}
sel
.onchange=function(){
var i
=this.selectedIndex
;
var cate
=cts
[i
-1];
while(category
.lastChild
!=this){
category
.removeChild(category
.lastChild
);
}
if(cate
.children
){
createSel(cate
.children
);
}
}
category
.appendChild(sel
);
}
window
.onload=function(){
createSel(categories
);
}
</script
>
4总结
编译器生成html文件 把文件插入对应位置即可
Processed:
0.010, SQL:
8
