精华帖 (0) :: 良好帖 (7) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-08-11
最后修改:2011-07-06
目中需要用到多级联动菜单,当时找到一个RayChou朋友写的 http://www.raychou.com/labs/linkage-select/ 。因为数据格式是简单的key:value格式,考虑以后项目需求扩展,于是参考这个自己也写了了一个,增加功能及优化事件绑定方式。
jQuery无限级联动多属性值下拉菜单 多级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。
特点: 1、数据记录可以包含多个属性信息便于前台操作 2、数据来源多样性,可以本地js加载,或者ajax动态获取,甚至本地+ajax动态复合方式(比如本地只加载第一级主要数据,动态获取下级数据) 3、可动态生成下级菜单。可动态隐藏下级菜单。可自定义菜单宽度或者自适应宽度 4、可自定义菜单第一个提示选项(比如“请选择”),可自定义自动隐藏提示选择选项如果数据唯一 5、缓存ajax获得信息。并且如果到达树枝末端两次后将不会对此节点发起新的ajax请求减小服务端负载 6、可自定义onchange回调函数实现多功能
详细功能及设置请见 DEMO
由于数据结构不同以及信息量不同,所以全国区划代码的本地district-all.js文件比RayChou的要大许多,可以考虑自己裁减或者ajax方式动态获取。 如果是demo本地浏览,则ajax方式将无法获得数据
没精力去美化界面,所以页面基本照搬RayChou朋友的 如果有朋友喜欢甚为高兴,有bug欢迎提出~
UPDATE:
2010.08.25
v1.1
2010.08.26 v1.2
fix: 在jQueryUI dialog模态窗口下使用时如果下拉列表较长则多次打开窗口后再次打开时FireFox下会出现页面闪动 add: 以下实例方法返回实例对象可链式操作其他方法 changeValues, onChange, reset, resetAll。比如 linkageSel.reset().changeValues([23, 2244]); mod: 使用缓冲池复用更新菜单时被删除的<option>对象
2011.05.30 v1.22 fix: ie6判断赋值错误,导致在IE6下JS加载错误。可以在1.2版文件上直接修改 jquery.linkagesel.js 54行: st.ie6 = true; ------> this.st.ie6 = true; jquery.linkagesel-min.js {st.ie6=true} ---------> {this.st.ie6=true}
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-10-06
最后修改:2010-10-06
哇噢!!
太棒了~先支持! 我在项目中也要有无限联动这样的一个功能,正苦于不知如何组织数据结构呢。 有幸看到楼主的帖子,正好借鉴借鉴!哈哈,多谢LZ分享如此精彩的好东西。 |
|
返回顶楼 | |
发表时间:2010-10-07
呵呵,其实我这个数据结构比较复杂适合多信息类型(比如邮编、简称、长途区号)。 RayChou 朋友的那个结构简洁适合下拉菜单的key:value格式。 具体取舍看自己需求。
至于后台数据结构,如果数据量不大,层次不深可以采用pid(parent_id)方式来组织,如果层次深那么可以考虑使用前序遍历(left_node,right_node,level)方式。 |
|
返回顶楼 | |
发表时间:2011-05-27
不支持ie6.0
|
|
返回顶楼 | |
发表时间:2011-05-27
借鉴下,刚好要用上
|
|
返回顶楼 | |
发表时间:2011-05-27
天煞人化 写道 不支持ie6.0
出现什么问题? 找不到IE6的机子了…… |
|
返回顶楼 | |
发表时间:2011-05-28
初学 好好研究下 谢谢分享这么好的代码 Thanks
|
|
返回顶楼 | |
发表时间:2011-05-31
天煞人化 写道 不支持ie6.0 有个变量赋值错误。已经修正。 |
|
返回顶楼 | |
发表时间:2011-06-11
好东西,学习下
|
|
返回顶楼 | |
发表时间:2011-06-11
小菜鸟请教下:opts中的select是什么意思:jQuery选择器字符串或者jQuery选择器字符串数组。demo中填写的都是#demo名称。有什么作用呢
|
|
返回顶楼 | |