LinkageSel:javascript 无限级联动下拉菜单 省市地多级联动多属性值下拉菜单 2014.10.04更新...

5 篇文章 0 订阅
3 篇文章 0 订阅
[b]javascript 无限级联动多属性值下拉菜单[/b]

无限级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。

[url=https://github.com/waitingsong/LinkageSel]GitHub Repository[/url]

特点:

1、数据记录可以包含多个属性信息便于前台操作

2、数据来源多样性,可以本地js加载,或者ajax动态获取,甚至本地+ajax动态复合方式(比如本地只加载第一级主要数据,动态获取下级数据)

3、可动态生成下级菜单。可动态隐藏下级菜单。可自定义菜单宽度或者自适应宽度

4、可自定义菜单第一个提示选项(比如“请选择”),可自定义自动隐藏提示选择选项如果数据唯一

5、缓存ajax获得信息。并且如果到达树枝末端两次后将不会对此节点发起新的ajax请求减小服务端负载

6、可自定义onchange回调函数实现多功能


[b]详细功能、参数设置及请见[url=http://linkagesel.xiaozhong.biz] DEMO[/url]
[url=http://linkagesel.xiaozhong.biz/linkagesel.zip]猛击我下载最新版[/url][/b]


由于数据结构不同以及信息量不同,所以全国区划代码的本地district-all.js文件比RayChou的要大许多,可以考虑自己裁减或者ajax方式动态获取。

如果是demo本地浏览,则ajax方式将无法获得数据


没精力去美化界面,所以页面基本照搬RayChou朋友的 [img]/images/smiles/icon_biggrin.gif" alt="[/img]

如果有朋友喜欢甚为高兴,有bug欢迎提出~


UPDATE:

[b]2013.05.08 v2.0[/b]
Bug Fixes
---------
* ajax_loader offset值不正常导致ajax请求时导致body宽度/高度巨变从而滚动条不正常
* 当本地未加载(js)数据全部ajax请求且defVal有值时第一级菜单无法触发ajax请求

Add Features
---------
+ 参数增加 dataReader,默认值为 {id: 'id', name: 'name', cell: 'cell'} 用于自定义定义数据的key键名。并且dataReader.id的值也用于生成ajax请求URL。若dataReader.id值空则id值取数据迭代的key值。详细见demo


[b]2013.04.25 v1.33[/b]
Bug Fixes
---------
* selClass设置默认值'LinkageSel',无论是自动创建的还是预先创建的每个<select>对象都会拥有此class,你可以在css样式文件中定义此类的样式

Changes
---------
* selStyle设置默认值改为空

Updates
---------
+ 添加天津滨海新区,重庆北部新区、两江新区,辽宁沈阳市沈北新区,贵州贵阳观山湖区数据

[b]2013.04.10 v1.32[/b]
Bug Fixes
---------
* elm not exists when bindIdx is 0

[b]2013.03.22[/b] v1.31
Bug Fixes
---------
* 当改变为值为null或空的选项时未执行onChange()回调函数。eg. 对于Demo2来说当从其他选项改为“请选择”时未执行回调函数


[b]2013.03.05[/b] v1.3
Add Features
---------
+ 添加mvcQuery参数(bool),置true后ajax请求会生成符合MVC格式的URI, 比如 http://linkagesel.xiaozhong.biz/district/get_nodes/0
URI第一个分段district为controller控制器名,第二分段get_nodes为方法名,第三分段为id的值。此时 ajax值需要设定为MVC格式,
比如 ajax: 'district/get_nodes'。可与CodeIgniter等PHP框架配合使用


Bug Fixes
---------
* this.st.loaderImg HTML代码生成问题。感谢 jeff-stric(jeff-stric.iteye.com)朋友提供
* this.st.loaderImg 值未转义

Changes
---------
* 要求jQuery v1.6及以上版本,不再提供兼容jQuery v1.6pre的版本,可自行代码以便适用于低版本jQuery
* 因为jQuery v1.9版本废弃了 $.browser 方法,所以如果使用jQuery1.9并且未加载第三方代码判断浏览器,则LinkageSel会把IE6-8都判断为IE6(用于事件触发)


[b]2010.08.25[/b] v1.1
更新到v1.1 新增1个实例方法 changeValues(),更改district-level1.js,district-level2.js内全局变量名称以便 可以同时加载多个地区变量而互相不影响


[b]2010.08.26 v1.2[/b]
更新到v1.2

fix: 在jQueryUI dialog模态窗口下使用时如果下拉列表较长则多次打开窗口后再次打开时FireFox下会出现页面闪动

add: 以下实例方法返回实例对象可链式操作其他方法 changeValues, onChange, reset, resetAll。比如 linkageSel.reset().changeValues([23, 2244]);

mod: 使用缓冲池复用更新菜单时被删除的对象


[b]2011.05.30 v1.22[/b]

fix: ie6判断赋值错误,导致在IE6下JS加载错误。可以在1.2版文件上直接修改

jquery.linkagesel.js 54行:

st.ie6 = true; ------> this.ie6 = true;

jquery.linkagesel-min.js

{st.ie6=true} ---------> {this.st.ie6=true}


[b]2011.07.31 v1.24[/b]

fix: ie6延时问题,DEMO9无法触发生成联动菜单。


chg: 生成方式

upd: 提供兼容jQuery v1.6+的版本,采用.prop()替代.attr()操作对象特性
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值