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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
微信小程序实现吸顶效果
Jan 08 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
header导出Excel应用示例
2014/01/24 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
Table冻结表头示例代码
2013/08/20 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python去除文件中重复的行实例
2018/06/29 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Django框架模板介绍
2019/01/15 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
详解pandas赋值失败问题解决
2020/11/29 Python
python链表类中获取元素实例方法
2021/02/23 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
什么是Assembly(程序集)
2014/09/14 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
公司董事长职责
2013/12/12 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
幽灵公主观后感
2015/06/09 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技