首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

LinkageSel:无限级联动上拉菜单 省市地多级联动多属性值上拉菜单

2012-11-09 
LinkageSel:无限级联动下拉菜单 省市地多级联动多属性值下拉菜单目中需要用到多级联动菜单,当时找到一个Ra

LinkageSel:无限级联动下拉菜单 省市地多级联动多属性值下拉菜单

目中需要用到多级联动菜单,当时找到一个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朋友的 LinkageSel:无限级联动上拉菜单 省市地多级联动多属性值上拉菜单

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

?

UPDATE:

?

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

?

?

2010.08.26 v1.2
更新到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.ie6 = true;

jquery.linkagesel-min.js

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

?

?

2011.07.31 v1.24

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

?

chg: 生成<option>方式

upd: 提供兼容jQuery v1.6+的版本,采用.prop()替代.attr()操作对象特性

?

var opts = {            
ajax: 'district_crud_aj-demo.php?aj=15', //ajax获取            selStyle: 'margin-left: 3px;',            
select: '#demo2'    
};                  
var linkageSel2 = new LinkageSel(opts);
</script> 


<select id="demo3"></select>
<script type="text/javascript" >    
var opts = {            
ajax: 'district_crud_aj-demo.php?aj=15', //再一次ajax获取            selStyle: 'margin-left: 3px;',            
select: '#demo3'    
};                  
var linkageSel3 = new LinkageSel(opts);
</script> 


只有demo2有效,demo3无法显示数据。var opts2 = {
ajax: 'getdata.php' //获取json数据
selStyle: 'margin-left: 3px;',
select: '#demo2'    
};                  
var linkageSel2 = new LinkageSel(opts2);
</script> 


地区2:<select id="demo3"></select>
<script type="text/javascript" >    
var opts3 = {            
ajax: 'getdata.php', //也是通过ajax获取json数据       
selStyle: 'margin-left: 3px;',            
select: '#demo3'    
};                  
var linkageSel3 = new LinkageSel(opts3);
</script> 

这时只有demo2显示ajax获取的数据,而demo3无法显示ajax获取的数据。

如上代码是否有写的不对的地方?如果没有。您可以测试一下。是不是有这个情况发生。</div>

<script type="text/javascript" >
   var data1 = {'1':{'name':'abc'},'2':{'name':'abc'},'3':{'name':'abc'}};
    var opts = {
            ajax: "regsiter!getJsonList.action?idname=-1",
            //data:data1,
            selStyle: 'margin-left: 3px;',
            select: '#demo3'
    };
            
    var linkageSel3 = new LinkageSel(opts);
</script>

demo3试验了N次,执行不了。
返回的数据就是data1,不用ajax可以,使用ajax就是不生效了。
其它同志试验过吗?
给url加上一个随机字符
请修改为


否则当this.st.loaderImg存在时 '"/>' 无法输出

 

热点排行