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; ------> this.ie6 = true;
jquery.linkagesel-min.js
{st.ie6=true} ---------> {this.st.ie6=true}
2011.07.31 v1.24
fix: ie6延时问题,DEMO9无法触发生成联动菜单。
chg: 生成方式
upd: 提供兼容jQuery v1.6+的版本,采用.prop()替代.attr()操作对象特性
分享到:
相关推荐
"YeeH 无限级联动下拉菜单 V1.03 (含数据JS)"是一个专门用于实现这种功能的组件,通过JavaScript编程语言来动态构建和管理多级关联的下拉菜单。 首先,我们要理解“无限级”这个概念。在传统的下拉菜单中,通常只有...
无限级联动菜单是一种常见的网页交互元素,用于在网站中实现多级分类的导航。JavaScript作为客户端脚本语言,被广泛用于实现这种动态效果。在这个案例中,我们将深入探讨如何使用JavaScript来创建一个无限级联动菜单...
"jQuery手机端无限级导航下拉菜单代码"就是一个解决此类问题的方案,它允许用户在一个简洁的界面下访问多级菜单,而无需展开多个屏幕。本文将详细介绍这个代码实现的关键技术和原理。 首先,jQuery是一个广泛使用的...
标题中的“多款多级联动下拉菜单打包!必有一款适合你!”表明这是一个集合了多种实现多级联动下拉菜单技术的资源包,适用于不同的项目需求和开发环境。这样的菜单通常用于网站导航或者表单中,使得用户可以通过选择一...
总的来说,jQuery无限级联动下拉选择插件是通过jQuery库实现的,结合Ajax技术,实现了用户在多级下拉菜单中交互时的实时更新和联动效果。这种插件在网站表单设计和数据筛选中具有广泛的应用价值,提高了用户体验并...
联动菜单是两个或多个下拉框之间通过特定逻辑关联起来,当用户在一个下拉框中做出选择时,其他下拉框的内容会根据这个选择自动更新。这种动态更新的能力使得用户能够在不离开当前页面的情况下完成多级选择,减少了...
【程序老媛出品,必属精品,亲测校正,质量保证】 ...源码说明: 基于asp的ajax无限级联动菜单程序 可自定义添加联动菜单层数 包含完整代码和注释 很适合借鉴学习 适合人群:新手及有一定经验的开发人员
dropList v1.0-无限级联动下拉框JavaScript类 1、无限制多级联动 2、支持选择状态保存,使用Cookie 3、支持初始值选定 4、同一页面中多个应用不会相互影响 包含一个省市县三级联动的例子
JavaScript 自定义多级联动下拉菜单
jQuery多级无限级导航下拉菜单是Web开发中常见的交互元素,它允许用户在主菜单项下展开子菜单,提供更丰富的导航体验。这个压缩包包含了一套完整的jQuery实现的多级下拉菜单代码,适合那些希望在自己的网站上添加...
无限级联动菜单是一种常见的网页交互设计,主要用于导航或者数据筛选,常见于网站的地区选择、类别筛选等场景。AJAX(Asynchronous JavaScript and XML)技术是实现这种菜单动态加载的关键,它允许页面在不重新加载...
全国省市区三级联动下拉菜单是一种常见的前端交互设计,它在网页或应用程序中用于选择地址时,用户可以依次从省、市、区三个级别的下拉菜单中选择,以实现快速定位。这种设计常见于电子商务、物流配送、信息录入等多...
ASP三级联动下拉菜单 ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单,通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中,例如电商平台、在线论坛等。 在这个例子中...
"jQuery手机端无限级导航下拉菜单代码"就是一个很好的实例,它通过巧妙的编程技巧,实现了在手机端优雅地展开和收起无限级的下拉菜单。 该代码的核心在于利用jQuery事件监听和DOM操作功能。首先,我们需要理解HTML...
水平无限级分类下拉式导航菜单是一种常见的网页设计技术,尤其在内容丰富的网站中非常实用。这种导航方式允许用户在不离开当前页面的情况下通过下拉菜单探索网站的多层次结构,从而提供更直观、高效的浏览体验。 一...
无限级联则意味着这种联动可以无限制地深入到多个级别,用户可以根据选择逐级展开下拉菜单,获取更精确的信息。 在C#.NET中,我们可以使用ASP.NET控件,如DropDownList,配合JavaScript或者AJAX技术来实现动态加载...
在网页开发中,为了提供用户友好的交互体验,经常需要实现一些动态的、有层次的数据选择功能,例如省市区三级联动下拉菜单。在这种场景下,`Select2` 库是一个非常优秀的工具,它能够帮助开发者创建功能强大、易于...
无限级下拉菜单是一种在网页设计中常见的交互元素,它允许用户从多个嵌套的下拉选项中选择,尤其适用于组织结构复杂或者分类层级较多的情况。在这个“无限级下拉菜单(ASPAJAXJS)”的项目中,我们可能会看到如何结合...
与传统的单选下拉列表相比,多选下拉列表允许用户同时选择多个值,极大地提高了用户体验和效率。 3. **复选下拉列表**: 复选下拉列表通常具有嵌套选项,即下拉菜单中的某些选项还可以展开为更具体的子选项。这种...
JavaScript多级下拉菜单插件是一种常见的网页交互元素,它允许用户通过点击主菜单项来展开下一级甚至多级的子菜单,以提供更丰富的导航结构。在网页设计中,这种菜单可以有效地组织大量链接,使得用户能更快地找到所...