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


Posted in Javascript onAugust 30, 2011

演示地址: http://demo.3water.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]); 
}
Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JS面向对象编程浅析
Aug 28 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
javascript 原型继承介绍
Aug 30 #Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 #Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 #Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 #Javascript
Javascript 面向对象编程(一) 封装
Aug 28 #Javascript
You might like
最省空间的计数器
2006/10/09 PHP
php strcmp使用说明
2010/04/22 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
python双向链表实现实例代码
2013/11/21 Python
python中global用法实例分析
2015/04/30 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
JAVA招聘远程笔试题
2015/07/23 面试题
初中美术教学反思
2014/01/29 职场文书
生产部岗位职责范文
2014/02/07 职场文书
食品销售计划书
2014/04/26 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js