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 相关文章推荐
jquery引用方法时传递参数原理分析
Oct 13 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
职称自我鉴定
2013/10/15 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
销售内勤岗位职责
2015/02/10 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers