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

目中需要用到多级联动......
哇噢！！ 太棒了～先......
呵呵，其实我这个数据......
不支持ie6.0......
借鉴下，刚好要用上......
天煞人化写道 不支持......
初学好好研究下谢谢分......
天煞人化写道 不支持......
好东西，学习下......
小菜鸟请教下：opt......


目中需要用到多级联动菜单，当时找到一个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
更新到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.st.ie6 = true;
jquery.linkagesel-min.js
{st.ie6=true} --------->  {this.st.ie6=true}

linkageSel.20100812.zip (221.1 KB)
描述: 新增区划分级数据及对应demo
下载次数: 477
linkageSel.20100825.zip (221.9 KB)
下载次数: 205
linkageSel.20100826.zip (223.2 KB)
下载次数: 366
linkageSel.20110530.zip (223.1 KB)
下载次数: 188
linkageSel.20110801.zip (243.9 KB)
下载次数: 36

哇噢！！
太棒了～先支持！
我在项目中也要有无限联动这样的一个功能，正苦于不知如何组织数据结构呢。
有幸看到楼主的帖子，正好借鉴借鉴！哈哈，多谢LZ分享如此精彩的好东西。

呵呵，其实我这个数据结构比较复杂适合多信息类型（比如邮编、简称、长途区号）。 RayChou 朋友的那个结构简洁适合下拉菜单的key:value格式。 具体取舍看自己需求。
至于后台数据结构，如果数据量不大，层次不深可以采用pid（parent_id）方式来组织，如果层次深那么可以考虑使用前序遍历（left_node,right_node,level）方式。

  不支持ie6.0

借鉴下，刚好要用上

天煞人化 写道
  不支持ie6.0


出现什么问题？
找不到IE6的机子了……

      初学 好好研究下  谢谢分享这么好的代码 Thanks

天煞人化 写道
  不支持ie6.0


有个变量赋值错误。已经修正。

好东西，学习下

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