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 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python实现红包裂变算法
2016/02/16 Python
python 上下文管理器使用方法小结
2017/10/10 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Mac安装python3的方法步骤
2019/08/09 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
办理居住证介绍信
2014/01/15 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
三行辞职书范文
2015/02/26 职场文书
指导教师推荐意见
2015/06/05 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
mysql数据库隔离级别详解
2022/06/16 MySQL