`

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()操作对象特性

分享到:
评论
47 楼 waiting 2014-10-04  
silentu 写道
感谢博主分享,不过我发现在demo12中不使用提示条目,然后点击第一个选项就不会跳出后面的select,只有点击下一个才会有反应,这样好像会导致不使用提示条目时指定默认值不太好用。

fixed。 see demo12
46 楼 waiting 2014-10-04  
silentu 写道
感谢博主分享,不过我发现在demo12中不使用提示条目,然后点击第一个选项就不会跳出后面的select,只有点击下一个才会有反应,这样好像会导致不使用提示条目时指定默认值不太好用。

如果用defVal指定了多级默认值,是可以正常工作的。 不过如果未指定默认值,那么的确不会出现下级选单,是个问题,待修复
45 楼 waiting 2014-10-04  
pmaojie1 写道
请问如何自定义排序,好像默认是按key从小到大排序,和数据结构先后没有关系!
但是key是id,我不能用这个来排序如何处理?

生成option顺序是以数据源的json对象顺序来的。如果数据源是js文件,你可以直接修改条目顺序,如果是ajax获取那么就是在后台组织顺序。 linkageSel本身并不支持数据的排序
44 楼 waiting 2014-10-04  
更新到 v2.3.20140930
43 楼 pmaojie1 2014-06-18  
请问如何自定义排序,好像默认是按key从小到大排序,和数据结构先后没有关系!
但是key是id,我不能用这个来排序如何处理?
42 楼 silentu 2013-12-04  
感谢博主分享,不过我发现在demo12中不使用提示条目,然后点击第一个选项就不会跳出后面的select,只有点击下一个才会有反应,这样好像会导致不使用提示条目时指定默认值不太好用。
41 楼 waiting 2013-03-21  
jeff_stric 写道
有个BUG:
jquery.linkagesel-min.js 和 jquery.linkagesel.js文件中
引用
jQuery(document.body).append('<img id="linkagesel_loader" style="display: none; position: absolute;"  src="' + this.st.loaderImg || 'ui-anim_basic_16x16.gif' + '" />');

请修改为
引用
jQuery(document.body).append('<img id="linkagesel_loader" style="display: none; position: absolute;"  src="' + (this.st.loaderImg || 'ui-anim_basic_16x16.gif') + '" />');


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

 

多谢反馈,已更新
40 楼 jeff_stric 2012-09-17  
有个BUG:
jquery.linkagesel-min.js 和 jquery.linkagesel.js文件中
引用
jQuery(document.body).append('<img id="linkagesel_loader" style="display: none; position: absolute;"  src="' + this.st.loaderImg || 'ui-anim_basic_16x16.gif' + '" />');

请修改为
引用
jQuery(document.body).append('<img id="linkagesel_loader" style="display: none; position: absolute;"  src="' + (this.st.loaderImg || 'ui-anim_basic_16x16.gif') + '" />');


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

 
39 楼 waiting 2012-05-23  
lightning0802 写道
如果不用ajax动态获取数据吧,老是有缓存,js更新了,但是页面获取到的下拉菜单还是旧的,已经重启过ie了,还是无效,怎么办,请教作者大侠


如果你希望使用ajax数据源的缓存机制而使用js加载数据,并且避免js文件的浏览器缓存,你可以在加载js的时候用小技巧避免浏览器缓存,比如

<script type="text/javascript" src="js/district-all.js?s3z"></script>

给url加上一个随机字符
38 楼 waiting 2012-05-23  
lightning0802 写道
大侠, onChange获取当前选择的值,在用ajax数据源的情况下有延迟啊,就是说,从第二次选择开始,onChange获取到的都是上一次选择到的值,而不是当前的,怎么办呢?


没看明白你的意思。是否这样:因为程序设计为若通过ajax获得数据,当首次获得数据之后下次被触发时就不会再去ajax远程读数据,而是使用上次获得的已被缓存的数据。所以导致了你的问题?
37 楼 lightning0802 2012-05-22  
如果不用ajax动态获取数据吧,老是有缓存,js更新了,但是页面获取到的下拉菜单还是旧的,已经重启过ie了,还是无效,怎么办,请教作者大侠
36 楼 lightning0802 2012-05-22  
大侠, onChange获取当前选择的值,在用ajax数据源的情况下有延迟啊,就是说,从第二次选择开始,onChange获取到的都是上一次选择到的值,而不是当前的,怎么办呢?
35 楼 waiting 2012-03-27  
redgull 写道

我把代码也跌上来吧
var opts = {
ajax: '/inc/getajax2.asp?t=2',
head: '=选择栏目=',
select: '#sltChannel',
defVal: [48, 56]
};
var linkageSel = new LinkageSel(opts);



现在的情况是它只会绑定第一级,剩余的一个生成的select数据是被填充了,但是没有默认选中56


你也可以试试用 在onChange() 中调用 changeValues()方法选择需要的值。请参见DEMO中 demo15.
34 楼 waiting 2012-03-27  
redgull 写道


我把代码也跌上来吧


var opts = {
ajax: '/inc/getajax2.asp?t=2',
head: '=选择栏目=',
select: '#sltChannel',
defVal: [48, 56]
};
var linkageSel = new LinkageSel(opts);



现在的情况是它只会绑定第一级,剩余的一个生成的select数据是被填充了,但是没有默认选中56


可能是因为你第二级数据是动态获取的,设定默认的56对其无效。如果第二级数据是在初始化时就存在那么56就有效。

有待改进
33 楼 redgull 2011-12-08  
redgull 写道
waiting 写道
redgull 写道
redgull 写道
ajax绑定数据后,最后一个select改变值后始终没有被触发onChange事件,麻烦debug,
27497003@qq.com
:(

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

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



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


我的意思是动态绑定多级?数据是ajax
例如我要绑定

四川省 成都市 金牛区

我的ajax页面的数据不是一次性全部输入,而是根据上一层父id获取当前级的数据



我把代码也跌上来吧


var opts = {
ajax: '/inc/getajax2.asp?t=2',
head: '=选择栏目=',
select: '#sltChannel',
defVal: [48, 56]
};
var linkageSel = new LinkageSel(opts);



现在的情况是它只会绑定第一级,剩余的一个生成的select数据是被填充了,但是没有默认选中56
32 楼 redgull 2011-12-08  
waiting 写道
redgull 写道
redgull 写道
ajax绑定数据后,最后一个select改变值后始终没有被触发onChange事件,麻烦debug,
27497003@qq.com
:(

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

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



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


我的意思是动态绑定多级?数据是ajax
例如我要绑定

四川省 成都市 金牛区

我的ajax页面的数据不是一次性全部输入,而是根据上一层父id获取当前级的数据
31 楼 lightning0802 2011-10-29  
waiting 写道
lightning0802 写道
大侠,ajax获取数据时,后台接收的参数是什么?请指导一下

后台只用接受id参数即可。你可以用firefox的firebug看看DEMO页面提交的查询数据即可

迎刃而解!!多谢指点!!!感激不尽
30 楼 waiting 2011-10-28  
lightning0802 写道
大侠,ajax获取数据时,后台接收的参数是什么?请指导一下

后台只用接受id参数即可。你可以用firefox的firebug看看DEMO页面提交的查询数据即可
29 楼 lightning0802 2011-10-28  
大侠,ajax获取数据时,后台接收的参数是什么?请指导一下
28 楼 waiting 2011-09-29  
这段时间很忙,等空了测试下。抱歉啦。

相关推荐

    dropList v1.1 - JavaScript无限级联动下拉列表框

    《dropList v1.1:JavaScript无限级联动下拉列表框深度解析》 在Web开发中,用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验,还能有效节省页面空间。今天我们将深入探讨“dropList v...

    jQuery多级无限级导航下拉菜单.zip

    当涉及到复杂的网站结构时,多级无限级导航下拉菜单尤其有用,因为它们可以有效地组织和显示大量链接。jQuery,作为一个轻量级、高性能的JavaScript库,常被用来实现这种交互效果。下面我们将深入探讨jQuery如何实现...

    支持无限级的联动下拉菜单

    联动下拉菜单,又称为级联菜单或连动菜单,是指当用户在一个下拉菜单中选择某个选项时,会触发另一个下拉菜单的显示或更新。这种设计可以有效节省页面空间,提高用户体验,尤其在处理多级分类时。 二、无限级联动的...

    jQuery无限级联动下拉选择插件

    总的来说,jQuery无限级联动下拉选择插件是通过jQuery库实现的,结合Ajax技术,实现了用户在多级下拉菜单中交互时的实时更新和联动效果。这种插件在网站表单设计和数据筛选中具有广泛的应用价值,提高了用户体验并...

    省市县(区)三级联动下拉菜单(内含省市县(区)access、sqlsever数据库)

    在IT开发领域,尤其是Web应用开发中,"省市县(区)三级联动下拉菜单"是一种常见的功能设计,主要用于用户选择地理位置。这种设计通常涉及到前端的JavaScript交互以及后端数据库的配合。本资源提供了一个完整的解决...

    ajax版本 asp无限级联动菜单程序源码.zip

    【程序老媛出品,必属精品,亲测校正,质量保证】 ...源码说明: 基于asp的ajax无限级联动菜单程序 可自定义添加联动菜单层数 包含完整代码和注释 很适合借鉴学习 适合人群:新手及有一定经验的开发人员

    dropList v1.0-JavaScript无限级联动下拉框类

    dropList v1.0-无限级联动下拉框JavaScript类 1、无限制多级联动 2、支持选择状态保存,使用Cookie 3、支持初始值选定 4、同一页面中多个应用不会相互影响 包含一个省市县三级联动的例子

    jQuery多级无限级导航下拉菜单代码.zip

    jQuery多级无限级导航下拉菜单是Web开发中常见的交互元素,它允许用户在主菜单项下展开子菜单,提供更丰富的导航体验。这个压缩包包含了一套完整的jQuery实现的多级下拉菜单代码,适合那些希望在自己的网站上添加...

    联动四级菜单+无限级联动菜单+无限级联动菜单-AJAX版&JavaScript版.zip

    联动四级菜单+无限级联动菜单+无限级联动菜单-AJAX版&JavaScript版

    jQuery多级下拉菜单支持多级下拉列表菜单.zip

    jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现动态、交互式的页面效果,其中包括多级下拉菜单的创建。这个名为"jQuery多级下拉菜单支持多级下拉列表菜单"的资源,就是专门为商城网站或企业网站设计的一...

    无限级联动菜单-AJAX版&JavaScript版

    无限级联动菜单是一种常见的网页交互设计,主要用于导航或者数据筛选,比如在选择省份后自动更新城市选项,再选择城市后自动加载区县等。在这个"无限级联动菜单-AJAX版&JavaScript版"中,我们将深入探讨如何使用AJAX...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    联动下拉菜单的基本原理是,当用户在一个下拉菜单中选择一个选项时,另一个下拉菜单的选项会根据前者的选中值动态更新。 1. **HTML基础布局**: - 创建两个或多个`&lt;select&gt;`元素,每个`&lt;select&gt;`对应一个级别的...

    全国省市区三级联动下拉菜单

    全国省市区三级联动下拉菜单是一种常见的前端交互设计,它在网页或应用程序中用于选择地址时,用户可以依次从省、市、区三个级别的下拉菜单中选择,以实现快速定位。这种设计常见于电子商务、物流配送、信息录入等多...

    Select2实现全国省市区三级联动下拉菜单

    在网页开发中,为了提供用户友好的交互体验,经常需要实现一些动态的、有层次的数据选择功能,例如省市区三级联动下拉菜单。在这种场景下,`Select2` 库是一个非常优秀的工具,它能够帮助开发者创建功能强大、易于...

    ASP无限级联动菜单源码[80端口原创]

    在ASP中实现无限级联动菜单,通常涉及到数据库操作、递归算法以及JavaScript或jQuery的前端交互技术。 首先,无限级联动菜单是Web开发中常见的功能,它允许用户逐级选择或者浏览层次结构的数据,如目录、分类或层级...

    水平无限级分类下拉式导航菜单

    水平无限级分类下拉式导航菜单是一种常见的网页设计技术,尤其在内容丰富的网站中非常实用。这种导航方式允许用户在不离开当前页面的情况下通过下拉菜单探索网站的多层次结构,从而提供更直观、高效的浏览体验。 一...

    jQuery手机端无限级导航下拉菜单代码.zip

    "jQuery手机端无限级导航下拉菜单代码"就是一个很好的实例,它通过巧妙的编程技巧,实现了在手机端优雅地展开和收起无限级的下拉菜单。 该代码的核心在于利用jQuery事件监听和DOM操作功能。首先,我们需要理解HTML...

    可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo

    与传统的单选下拉列表相比,多选下拉列表允许用户同时选择多个值,极大地提高了用户体验和效率。 3. **复选下拉列表**: 复选下拉列表通常具有嵌套选项,即下拉菜单中的某些选项还可以展开为更具体的子选项。这种...

    javascript多级下拉菜单插件

    JavaScript多级下拉菜单插件是一种常见的网页交互元素,它允许用户通过点击主菜单项来展开下一级甚至多级的子菜单,以提供更丰富的导航结构。在网页设计中,这种菜单可以有效地组织大量链接,使得用户能更快地找到所...

    html+js实现地区三级联动下拉菜单

    在网页设计中,有时我们需要创建一个能够展示地区层级关系的交互式组件,这就是所谓的“地区三级联动下拉菜单”。这个组件通常由三个下拉菜单组成,分别代表省份、城市和区县,用户在选择上一级时,下一级的选项会...

Global site tag (gtag.js) - Google Analytics