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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
表单提交验证类
2006/07/14 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
使用typescript构建Vue应用的实现
2019/08/26 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Python中bisect的用法
2014/09/23 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python进程间通信之共享内存详解
2017/10/30 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python库matplotlib绘制坐标图
2019/10/18 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python中pop()函数的语法与实例
2020/12/01 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
租房协议书怎么写
2014/04/10 职场文书
大学生创业计划书
2014/08/14 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL