jQuery无限级联下拉框插件：无需Ajax交互

83 浏览量更新于2024-09-02 收藏 85KB PDF 举报

"这篇资源是关于基于jQuery的无限级联下拉框的JavaScript插件，旨在提供一个灵活且易于使用的解决方案，适用于各种级联下拉框需求。作者因为之前遇到的200行代码级联下拉框问题，决定开发这个简洁高效的插件。插件分为两个版本，一是不依赖服务器AJAX交互，需要预先加载所有数据；二是每个子级下拉框通过POST向服务器获取数据并利用缓存提高效率。" 基于jQuery的无限级联下拉框JS插件设计主要关注以下几个知识点： 1. **灵活性**：插件的设计考虑了多种使用场景，提供了可配置的选项，使得它能在不同环境中适应，如不同的数据来源、级联深度等。 2. **插件一**：这个插件适用于不需要实时从服务器获取数据的情况。所有的级联下拉框数据需要在初始化时一次性加载。这要求在页面加载时就已知所有级别的数据，适合数据量较小且不频繁更新的场景。 3. **插件二**：此插件在每次选择父级下拉框项后，通过AJAX向服务器请求子级数据，并且会缓存已经请求过的数据。这种设计优化了性能，尤其是当有大量数据或者同一父级下拉框对应不同子级数据时。缓存的键是自顶级到当前父级下拉框值的组合，确保了数据的正确匹配。 4. **AJAX交互**：插件二中，使用AJAX实现了下拉框数据的动态加载，使得用户选择时能即时获取数据，提高了用户体验。同时，服务器端只需要处理当前需要的数据，降低了服务器负载。 5. **数据结构**：级联下拉框的数据通常是以数组的形式存储，每个元素包含三个字段：显示文本、值和父级值。这种数据结构便于解析和绑定到下拉框中。 6. **插件API**：$.cascadeDropDownBind是插件提供的核心函数，用于绑定级联下拉框。参数包括预定义的数据项、源ID、选中的值、父级值以及子级下拉框的相关配置。 7. **缓存策略**：插件二的缓存策略不仅保存了父级下拉框的值，还包含了所有上级下拉框的值，避免了因相同父级值而引起的错误数据绑定。 8. **回发与表单提交**：在POST回发时，插件会将所有父级下拉框的值包含在表单数据中，确保服务器端能够正确识别上下文。 9. **代码优化**：虽然插件可能涉及到相对复杂的缓存机制，但整体代码设计保持简洁，以提高可读性和可维护性。 10. **版权信息**：插件遵循特定的版权协议，如本例中的Copyright 2011, Leo.Liu，使用前需了解并遵守相关授权条款。这个插件的出现，为开发者提供了处理级联下拉框问题的一个高效工具，既支持静态数据的快速绑定，也支持动态数据的异步加载，同时还考虑到了性能优化，是jQuery生态中一个实用的补充。

基于基于jquery的无限级联下拉框的无限级联下拉框js插件插件

灵活性方面考虑了比较多的方面，提供了几个重要的配置方便在各类环境下使用，欢迎各位童鞋使用，源码完全开放。开发这

个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷（之所以这么多代码是因为该级联

下拉框有时只出现2个或3个），想到这类的需求其实经常都能遇到，jquery里没有这样比较好的插件，索性自己开发个。源代

码并不复杂，稍微复杂的地方在第二个插件使用了缓存，造成理解起来十分困难，后面会做些解释。

插件一：适合在不与服务器进行AJAX交互情况使用，需预先将所有下拉框数据全部读出

插件二：适用于每个子级下拉框都post到服务器中取数据绑定。优秀之处在于会将已使用过的数据缓存达到高效率的目的，注

意：缓存的键值不仅仅是父下拉框的值，而是从顶级下拉框到当前父下拉框的值组合，这是为了对付出现相同父下拉框对应的

子级并不相同的情况。同样的原因，postback中回发给服务器的form表单中也是包括所有的父下拉框的值。

代码如下:

* 级联下拉框Jqueyr插件，V1.2

* 本插件包括2个无刷新级联下拉框插件：

* 插件一：cascadeDropDownData是在不与服务器进行AJAX交互情况使用，需预先将所有下拉框数据全部读出。demo：

* 方法一：var dataItem = [[‘全部’, ‘-1’, ‘0’], [‘a001’, ‘a001’, ‘0’], [‘a002’, ‘a002’, ‘0’], [‘a003’, ‘a003’, ‘0’]

, [‘b001’, ‘b001’, ‘a001’], [‘b002’, ‘b002’, ‘a001’], [‘b003’, ‘b003’, ‘a002’], [‘b004’, ‘b004’, ‘a003’]

, [‘c001’, ‘001’, ‘b001’], [‘c002’, ‘002’, ‘b001’], [‘c003’, ‘003’, ‘b002’], [‘c004’, ‘004’, ‘b003’]];

$.cascadeDropDownBind.bind(dataItem, { sourceID: ‘Select1’, selectValue: ‘a001’, parentValue : ‘0’,

child: { sourceID: ‘Select2’, selectValue: ‘b002’,

child: { sourceID: ‘Select3’, selectValue: ‘c002’}

}

});

* 此方法有缺陷：a)要求下拉框的值与父子对应中的父值不能相同 b)不能设置全选规则

* 方法二：var data = [[‘全部’, ‘0’], [‘a001’, ‘a001’], [‘a002’, ‘a002’], [‘a003’, ‘a003’]];

var data2 = [[‘全部’, ‘0’, ‘0’], [‘b001’, ‘b001’, ‘a001’], [‘b002’, ‘b002’, ‘a001’], [‘b003’, ‘b003’, ‘a002’], [‘b004’, ‘b004’, ‘a003’]];

var data3 = [[‘全部’, ‘0’, ‘0’], [‘c001’, ‘001’, ‘b001’], [‘c002’, ‘002’, ‘b001’], [‘c003’, ‘003’, ‘b002’], [‘c004’, ‘004’, ‘b003’]];

$.cascadeDropDownBind.bind(data, { sourceID: ‘Select1’, selectValue: ‘a001’ });

$.cascadeDropDownBind.bind(data2, { sourceID: ‘Select2’, selectValue: ‘b002’, parentID: ‘Select1’ });

$.cascadeDropDownBind.bind(data3, { sourceID: ‘Select3’, selectValue: ‘c002’, parentID: ‘Select2’ });

* 方法三参见cascadeDropDownBind.bind内容

jQuery.extend({

//下拉框的数据对象

cascadeDropDownData: function () {

//******配置属性*******

this.removeFirst = true; //是否移除第一个项

this.appentAllValue = ”; //如果父项目的值等于此值则显示所有项

this.sourceID = ”; //此下拉框ID

this.parentID = ”; //父下拉框ID

this.items = []; //项的数据，二维数组，形式：[[‘文本’, ‘值’, ‘父ID’],……]; 值和父ID可省略

this.selectValue = ”; //初始化选中的项

this.parentValue = null; //用于从一堆数据中筛选出该组所需的项，一般用于绑定第一个下拉框

//******配置属性*******

//以下是全局变量，无需在外部设置

this.child = null;

var currentDrop = null;

this.bind = function () {

currentDrop = $(‘#’ + this.sourceID);

this.clear();

//填充数据项目

this.fillItem();

//设置选中项

if (this.selectValue) {

currentDrop.val(this.selectValue);

}

//设置父下拉框的change事件

this.setChange();

};

//清理填充项目

this.clear = function () {

if (this.removeFirst) {

currentDrop.empty();

} else {

for (var i = currentDrop[0].options.length – 1; i > 0; i–) {

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38586428

粉丝: 7
资源: 904

jQuery无限级联下拉框插件：无需Ajax交互

Ajax 无限级 联动下拉框

jQuery可筛选下拉框美化插件.zip

一个可以无限级联的下拉框 跨浏览器

jquery插件 autoComboBox 下拉框

自创jQuery无刷新级联下拉框插件：全兼容与高效缓存

jQuery实现的无限级下拉菜单功能示例

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

3kb jQuery代码搞定各种树形选择的实现方法

JQuery&CSS;&CSS;+DIV实例大全.rar

基于 C++构建 Qt 实现的 GDAL 与 PROJ4 的遥感图像处理软件课程设计

最新资源

Ajax 无限级联动下拉框

一个可以无限级联的下拉框跨浏览器