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学习笔记之jQuery的事件
Dec 22 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
python读取图片任意范围区域
2019/01/23 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
C#面试题问题集
2016/04/02 面试题
我爱读书演讲稿
2014/05/07 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python