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

javascript 无限级联动多属性值下拉菜单

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

GitHub Repository

特点：

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

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

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

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

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

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


详细功能、参数设置及请见 DEMO
猛击我下载最新版


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

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


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

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


UPDATE:

2013.05.08 v2.0
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


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

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

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

2013.04.10 v1.32
Bug Fixes
---------
  * elm not exists when bindIdx is 0

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


2013.03.05   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（用于事件触发）


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: 使用缓冲池复用更新菜单时被删除的对象



2011.05.30 v1.22

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

jquery.linkagesel.js 54行：

st.ie6 = true; ------&gt; this.ie6 = true;

jquery.linkagesel-min.js

{st.ie6=true} ---------&gt;  {this.st.ie6=true}



2011.07.31 v1.24

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


chg: 生成方式

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

评论

27 楼 gaokill 2011-09-25  

<div>
<select id="demo3" ></select>
</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就是不生效了。
其它同志试验过吗？

26 楼 merop 2011-09-20  

再具体描述下。
一个页面中有2个select。且数据都是ajax来获取的。
代码如下：

地区1：<select id="demo2"></select>
<script type="text/javascript" >
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获取的数据。

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

25 楼 lightning0802 2011-09-13  

请问高手，你ajax获取数据那里，你那个获取数据的php文件是怎么知道选择了那个，如何传值的？

24 楼 waiting 2011-09-11  

merop 写道

这个情况，发现有问题。

只有demo2有效，demo3无法显示数据。

你说的是DEMO页面不正常还是你自己写的页面不正常？

23 楼 merop 2011-09-10  

这个情况，发现有问题。

<select id="demo2"></select>
<script type="text/javascript" >    
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无法显示数据。

22 楼 waiting 2011-08-28  

redgull 写道

redgull 写道

ajax绑定数据后，最后一个select改变值后始终没有被触发onChange事件，麻烦debug，
[e-mail]
:(

这个是我数据出错的问题，已解决。

新问题，怎么绑定多个select，数据为AJAX

这个‘多个select’指的是什么呢？
一个页面有多个联动菜单对象（比如一个是地区的，一个是公司部门分支的）？

21 楼 redgull 2011-08-25  

redgull 写道

ajax绑定数据后，最后一个select改变值后始终没有被触发onChange事件，麻烦debug，
[e-mail]
:(

这个是我数据出错的问题，已解决。

新问题，怎么绑定多个select，数据为AJAX

20 楼 redgull 2011-08-25  

ajax绑定数据后，最后一个select改变值后始终没有被触发onChange事件，麻烦debug，
[e-mail]
:(

19 楼 waiting 2011-08-05  

　　X 写道

你的“Demo3：省市地三级联动, Ajax动态获取下级数据 ”远程请求的php，
我想知道你这个数据是从哪里读出来了。DB还是？

从后台请求得到的。可以是来自于DB，也可以是数组啊。DEMO里面的是来自于DB.

18 楼 　　X 2011-08-05  

你的“Demo3：省市地三级联动, Ajax动态获取下级数据 ”远程请求的php，
我想知道你这个数据是从哪里读出来了。DB还是？

17 楼 waiting 2011-07-31  

v1.24修正IE6下问题，现在DEMO页面在IE6下都正常了。

16 楼 waiting 2011-06-27  

swhhcf 写道

我也是一个小菜鸟, Ajax动态获取2、3级数据 在 .net中要怎么做?能不能写个简单的例子?

不会.net，你只要按照既定格式提供数据就可以了呀？

15 楼 swhhcf 2011-06-27  

我也是一个小菜鸟, Ajax动态获取2、3级数据 在 .net中要怎么做?能不能写个简单的例子?

14 楼 waiting 2011-06-14  

vincent_com 写道

使用必须导入哪些包 也没介绍吗？

晕，不是连页面也需要别人手把手给你做好吧。

jquery.js： 必须的JS框架库
jquery.linkagesel-min.js： 级联主程序
district-all.js： 中国行政区划数据，用于DEMO.

13 楼 261667318 2011-06-12  

vincent_com 写道

使用必须导入哪些包 也没介绍吗？

============================================================
导入js包下的几个js文件就行了啊，我只导入了几个必要的：jquery.js，jquery.linkagesel-min.js，district-all.js就OK了

12 楼 vincent_com 2011-06-12  

使用必须导入哪些包 也没介绍吗？

11 楼 vincent_com 2011-06-12  

没找到 级联啊、只是页面列表而已

10 楼 261667318 2011-06-11  

261667318 写道

小菜鸟请教下：opts中的select是什么意思：jQuery选择器字符串或者jQuery选择器字符串数组。demo中填写的都是#demo名称。有什么作用呢

===============================
汗，我懂了~

9 楼 261667318 2011-06-11  

小菜鸟请教下：opts中的select是什么意思：jQuery选择器字符串或者jQuery选择器字符串数组。demo中填写的都是#demo名称。有什么作用呢

8 楼 261667318 2011-06-11  

好东西，学习下