Truly
写精彩代码 品暇逸人生
posts - 92,comments - 309,trackbacks - 46
无刷新联动菜单
分析网上常见的几种联动菜单算法后，对复杂度和效率以及空间进行了折衷。
1. 静态联动，适合于不经常更新的数据，比如省市联动菜单
2. 数据绑定，使用数据源进行绑定显示。
    a. DataSet/DataTable/DataCollect 数据源
    b. XML数据源
3.xmlhttp读取xml文件或webservice加载数据
目前已完成静态联动的模型和简单制作脚本，有兴趣的可以将其封装为DotNet控件。



上面是静态的Demo，下面可以动态生成一个简单的Demo。
注：因为生成Script的Script没有优化，并使用了递归，所以推荐生成2－7级的demo，过大的话会导致IE失去响应！但是生成出来的Script没有问题，性能良好。

注2：很遗憾没有用锯齿数组做demo:<.生成的Script有两部分，上面部分的script是数据定义和函数定义，实际使用时将其置于一个js中，页面中只须保留第2个script段。这样可以大大减小级别多时select中option所占用的字节数，减少页面的传输压力。

请输入你想要的级数

  
posted on 2005-08-11 03:37 Truly 阅读(7387) 评论(34)  编辑 收藏 所属分类: JavaScript & Vbscript

FeedBack:
#1楼 
2005-08-11 07:55 | zitiger      
非常棒,收藏了,哈哈
  回复  引用  查看    
#2楼 
2005-08-11 08:27 | 二十四画生      
不错，有用！
  回复  引用  查看    
#3楼 
2005-08-11 10:33 | chengulv      
看样多很不错， 先收藏了， 再慢慢分析。


  回复  引用  查看    
#4楼 
2005-08-11 12:02 | myrat      
不是我打击你，只支持ie不支持firefox等再好也没用啊
  回复  引用  查看    
#5楼 
2005-08-11 15:03 | Truly      
是的，现在只对ie提供支持，而且只对ie6进行了完整测试。
nascape和firefox的支持需要修改个别语句。

事实上，该菜单我并没有实际需要，只是希望给大家提供一个思路和完整的模型，有兴趣有需要的完全可以自己改呀，代码比较的简单，只做了少量注释。
  回复  引用  查看    
#6楼 [楼主]
2005-08-11 15:21 | Truly      
为了控制代码的行数及可读性，去掉了通过text或value定位的代码，只通过index定位。需要的可以自行添加
  回复  引用  查看    
#7楼 
2005-08-11 23:50 | alittlefish      
good!
  回复  引用  查看    
#8楼 
2005-08-30 16:30 | steven [未注册用户]
要兼容nascape和firefox，应该要修改哪些地方呢？
  回复  引用    
#9楼 
2005-09-12 19:01 | 徐灿钊Asp.net专栏      
做的很好，值得学习
  回复  引用  查看    
#10楼 
2005-09-28 16:25 | tree [未注册用户]
若每级数据量大且级联多的话，网络会受不住的
  回复  引用    
#11楼 
2005-09-28 16:31 | Truly      
一旦数据下载完成，每次选择时的计算是在本地计算完成的，依赖于本地的计算机性能，跟网络完全没有关系。而且推荐将数据放入js文件中以缓存。
  回复  引用  查看    
#12楼 
2005-09-28 16:38 | tree [未注册用户]
我的意思就是数据下载时会很慢，并不是每次选择时慢。

  回复  引用    
#13楼 [楼主]
2005-10-24 12:46 | Truly      
谢谢楼上各位的支持，这里对上面的问题作些解释

关于FireFox，现在已经提供支持。主要的修改部分是document.all->document.getElementById

关于数据量过大的情况，本文篇首已说明，本文所提供的是一种静态情况，对于数据量大的应采用xmlhttp进行动态的数据载入，关于xmlhttp，我的blog上也有几篇文章。
  回复  引用  查看    
#14楼 
2006-01-30 13:48 | esoutong [未注册用户]
非常感谢斑竹，我根据你的程序+省份证号前6位数字生成的三级联动下拉菜单，超爽呵呵，在此和大家一起共项：）

<Script language="JavaScript">
/****************************************************************
/*
/* Cascading Selection
/*
/* Author: Truly
/* Date: 2005-08-08
/* Ver: 0.1b
/* Web: http://Truly.cnblogs.com
/* Email: zhuleipro@hotmail.com
/* Modify Author: Esoutong
/* Modify Data: 2006-01-30 00:00:00
/* Author Web: http://www.esoutong.com
/***************************************************************/

  回复  引用    
#15楼 
2006-01-30 14:15 | esoutong [未注册用户]
具体地址：http://www.esoutong.com/sanji.html
  回复  引用    
#16楼 
2006-01-30 14:21 | esoutong [未注册用户]
#17楼 
2006-03-02 15:35 | liuliu [未注册用户]
强就一个字
  回复  引用    
#18楼 
2006-07-26 10:58 | wa [未注册用户]
sdf
  回复  引用    
#19楼 
2006-08-27 08:21 | bjxxgcxy [未注册用户]
太棒了。

楼主，我还想问个问题：
怎么在同一个页面中放2个多级联动菜单？
比如：
地点一：xxx省xxx市xxx县
地点二：xxx省xxx市xxx县
  回复  引用    
#20楼 
2006-08-27 08:21 | bjxxgcxy [未注册用户]
太棒了。

楼主，我还想问个问题：
怎么在同一个页面中放2个多级联动菜单？
比如：
地点一：xxx省xxx市xxx县
地点二：xxx省xxx市xxx县
  回复  引用    
#21楼 
2006-09-18 17:12 | xiaoxiao[匿名] [未注册用户]
我想连接数据库, 不知道怎么操作. 可不可以发到我的邮箱里
我不会js 我只要两级的
我的email myaspemail@126.com
谢谢了!
  回复  引用    
#22楼 
2006-10-09 19:27 | ww[匿名] [未注册用户]
在第一次打开页面的时候，一定是加载速度很慢哦。可以考虑用AJAX。
  回复  引用    
#23楼 
2007-03-15 09:46 | 梦中寻你 [未注册用户]
谢谢楼主,正要这个.
  回复  引用    
#24楼 
2007-04-03 14:42 | samson [未注册用户]
Truly, 你好,三级联动.我把代码放在一个JS里面调用的.但是我想生成的三个下拉框,不好控制它的属性,比喻点击别的复选框,让它们成不可用状态,或是选择好三个下拉框后直接提交到数据库.不知道怎么做哦.
  回复  引用    
#25楼 [楼主]
2007-04-06 15:07 | Truly      
to samson

下拉框都有id，利用id控制disabled即可

比如docuemnt.getElementById('selLev0').disabled = true;

即可变成不可用

关于提交，有个onchange事件，在每次选择时激发，提交数据库可以调用

setSelections();

此时页面上的js变量中分别保存了索引，值，文本（In, Vn, Tn),n表示第几级下拉框
  回复  引用  查看    
#26楼 
2007-06-04 17:27 | yama [未注册用户]
咨询一下,你写的这个,如果一级菜单下面的比如: 2,没有二级菜单内容时会报错,请问如何解决这个问题?
  回复  引用    
#27楼 
2007-08-31 14:53 | coreahan [未注册用户]
请问，博主，如果我想在页面中显示3个你这样的4级联动菜单，我改怎么改，能给些意见吗！谢谢
  回复  引用    
#28楼 
2007-08-31 14:57 | Truly      
当然可以的，比如当前页面的演示就是一个5级的，理论上可以无限级，但是对于dom的性能，目前尽量控制在10级以内。
  回复  引用  查看    
#29楼 
2007-09-03 09:02 | crasihty [未注册用户]
@Truly
樓主，目前我在開發 Oracle BI系統 ，急需一個可以動態連接Oracle數據庫，的多級无刷新联动菜单（JS或JSP），希望您可以幫忙提供一個！

在此，謝過了！
  回复  引用    
#30楼 
2007-09-18 22:31 | mqchy [未注册用户]
我们都希望你把这个静态的改成从数据库里读出来的动态的无刷新多级联动....
急切地期待中.......
  回复  引用    
#31楼 
2007-11-24 13:39 | wlt [未注册用户]
怎样加入ASP.NET页面中呢
  回复  引用    
#32楼 
2008-04-01 09:53 | 252 [未注册用户]
无言以对了，厉害！
  回复  引用    
#33楼 
2008-06-19 15:03 | zn [未注册用户]
怎么做还是不知道。
先顶一个，再慢慢看
  回复  引用    

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-08-26 13:48 编辑过


相关链接:

最新IT新闻:
消息称MySQL创始人已向Sun提交辞呈
谷歌Chrome浏览器即将更换LOGO颜色？
淘宝网合并阿里妈妈 专家称阿里巴巴或有新战略
微软研究院发布 AutoCollage - 整理并融合照片
2008年9月5日科技博客精选
博客园新闻频道  博客园首页  社区
 



Copyright ©2008 Truly Powered By博客园 模板提供：沪江博客