JS 无限级 Select效果实现代码(json格式)

演示地址: http://demo.jb51.net/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]);
}

赞 (0)

相关推荐

  • JS对象与JSON格式数据相互转换

    目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递

  • asp.net转出json格式客户端显示时间

    在服务器端利用 JavaScriptSerializer serializer = new JavaScriptSerializer(); return serializer.Serialize(obj); 对对像序列化, 对于时间类型得出结果为:\/Date(1216796600500)\/ 客户端解析的方式为: 复制代码 代码如下: function renderTime(data){ var da = eval('new ' + data.replace('/','','g').repla

  • PHP JSON格式数据交互实例代码详解

    在PHP中解析JSON主要用到json_encode和json_decode两个PHP JSON函数,比PHP解析XML方便很多,下面详细介绍下PHP JSON的使用.JSON基础介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON主要有两种结构: "名称/值"对的集合,在PHP中可以理解为关联数组 (associative array). 值的有序列表(An ordered list of values).在PHP中可以理解为

  • Jquery 组合form元素为json格式,asp.net反序列化

    作者:敖士伟 Email:ikmb@163.com 转载注明作者 说明: 1.js根据表单元素class属性,把表单元素的name和value组合为json格式;用表单元素class属性可以针对性地组合JSON数据. 2.后端ASP.NET用JavaScriptSerializer反序列化为对象实列. 3.好处:简化了前端数据读取与后端数据赋值. 复制代码 代码如下: function GetJSONStr(class_name) { var a = []; //文本框 $("." +

  • 使用JavaScript构建JSON格式字符串实现步骤

    如果你现在正在使用Restful API,并且你需要通过web项目来构建json格式字符串的响应,那么这篇文章将帮助你使用javascript来创建json格式字符串.这是非常有用的,我们将通过jQuery插件$.toJSON把数据对象转换为json格式. 使用JavaScript构建JSON格式字符串 JavaScript代码: 在这里包含了javascript代码.$("#form").submit(function(){}- delete_button是form标签的ID,我们通

  • 前后台交互过程中json格式如何解析以及如何生成

    前台: 复制代码 代码如下: $.ajax({ type: "POST", url: "GetMenuRole.ashx", data: "", dataType: "json", success: function (data) { if (data.Status == false) { alert(data.ErrorReason); } else { //解析这个菜单列表 alert(data.MenuList); }

  • 数据类型和Json格式分析小结

    1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如"北京"这个单独的词. 第二种类型是sequence(序列),也就是若干个相关的数据按照一定顺序并列在一起,又叫做array(数组)或List(列表),比如"北京,东京". 第三种类型是

  • json格式化/压缩工具 Chrome插件扩展版

    安装方法:用chrome浏览器访问 https://chrome.google.com/extensions/detail/pjkoglpbigbjijmncfkcpkcpddnelgbm?hl=zh-cn [json格式化/压缩]工具 chrome下安装 :) 1.建一个新的文件夹 2.建一个名为 manifest.json的文件 3.打开这个 manifest.json文件,可以理解为配置文件 :) 包含以下内容 复制代码 代码如下: { "name": "My Firs

  • JS 无限级 Select效果实现代码(json格式)

    演示地址: http://demo.jb51.net/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},

  • JS将网址url转化为JSON格式的方法

    网上方法很多,各种奇技淫巧,这里贴上一种较为正常的思路. 主要利用split对获取的字符串不断进行分割,最后获得所需要的格式. 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>将url转化为json数据</title> </head> <script> function

  • JS中的数组转变成JSON格式字符串的方法

    有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如: var jsonarr = [{"projectname":projectnam

  • js 触发select onchange事件代码

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件, 例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • js 分栏效果实现代码

    网上我也见到一些分栏效果,也有一个jquery的插件jquery.splitter.js, 但是他们基本都没有解决一个问题:如果页面上有iframe, 当拖动分割线经过iframe的时候,鼠标不听使唤了,我曾经开过帖子讨论过这个问题.本例采用一个小技巧解决了这个问题,使拖动流畅. 复制代码 代码如下: <html> <head> <title>Splitter demo</title> <style>             #splitter_

  • js时钟翻牌效果实现代码分享

    js时钟翻牌效果实现代码分享

    先给大家上运行效果图,看看是不是特别棒! 这一张是小编抓拍时钟翻牌时的效果图: 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create an Animated Flip Down Clock</title> <link rel=&quo

  • JS实现选项卡效果的代码实例

    选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧. 先来布局一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box

  • js展开闭合效果演示代码

    js展开闭合效果演示代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

随机推荐