JS 无限级 Select效果实现代码(json格式)

186 阅读 0 评论 123 点赞

我是靠谱客的博主彩色胡萝卜，最近开发中收集的这篇文章主要介绍JS 无限级 Select效果实现代码(json格式)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

演示地址: http://demo.uoften.com/js/2011/js_select/index.htm
数据

复制代码代码如下:

 
var data=[ 
{id:1,name:"前端开发",pid:0}, 
{id:2,name:"CSS",pid:1}, 
{id:3,name:"JS",pid:1}, 
{id:4,name:"HTML",pid:1}, 
{id:5,name:"数据库",pid:0}, 
{id:6,name:"SQLServer",pid:5}, 
{id:7,name:"MYSql",pid:5}, 
{id:8,name:"Oracle",pid:5}, 
{id:9,name:"PLSQL",pid:8} 
]; 

无限级 select demo1

复制代码代码如下:

 
var demo1=Doc.Get("demo1"); 
var chg=function(obj){ 
if(obj.options.length>1){ 
obj.selectedIndex=0; 
demo1.appendChild(obj); 
} 
} 
var sel1=new Select(data,chg); 
var _arr=sel1.getDom(); 
for(var i=0;i<_arr.length;i++){ 
demo1.appendChild(_arr[i]); 
} 

无限级 select demo2

复制代码代码如下:

 
var demo2=Doc.Get("demo2"); 
var chg=function(obj){ 
if(obj.options.length>1){ 
obj.selectedIndex=0; 
demo2.appendChild(obj); 
} 
} 
var sel=new Select(data,chg); 
var _arr=sel.getDom(9); 
for(var i=0;i<_arr.length;i++){ 
demo2.appendChild(_arr[i]); 
} 