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

灵活性方面考虑了比较多的方面，提供了几个重要的配置方便在各类环境下使用，欢迎各位童鞋使用，源码完全开放。开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷（之所以这么多代码是因为该级联下拉框有时只出现2个或3个），想到这类的需求其实经常都能遇到，jquery里没有这样比较好的插件，索性自己开发个。源代码并不复杂，稍微复杂的地方在第二个插件使用了缓存，造成理解起来十分困难，后面会做些解释。
插件一：适合在不与服务器进行AJAX交互情况使用，需预先将所有下拉框数据全部读出
插件二：适用于每个子级下拉框都post到服务器中取数据绑定。优秀之处在于会将已使用过的数据缓存达到高效率的目的，注意：缓存的键值不仅仅是父下拉框的值，而是从顶级下拉框到当前父下拉框的值组合，这是为了对付出现相同父下拉框对应的子级并不相同的情况。同样的原因，postback中回发给服务器的form表单中也是包括所有的父下拉框的值。
复制代码 代码如下:

jQuery.extend({
//下拉框的数据对象
cascadeDropDowndata: function () {
/
jQuery.extend({
//此对象是个链表结构
ajaxDropDowndata: function () {
/
this.getRightonChangeObj = function () {
if (this.parentObj)
return this.parentObj.getRightonChangeObj().childItem[$('#' + this.parentObj.sourceID).val()]; //递归
else
return this;
}
},
ajaxDropDownBind: {
currentDrop: null,
_thisdata: null,
callbackPool: [],
//清理填充项目
clear: function () {
if (_thisData.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0].options.length - 1; i > 0; i--) {
currentDrop[0].options[i] = null;
}
}
},
//填充数据项目
fillItem: function () {
for (var i = 0; i < _thisData.items.length; i++) {
var val = _thisData.items[i].length > 1 ? _thisData.items[i][1] : _thisData.items[i][0]; //如果没有指定value则用text代替
currentDrop.append('' + _thisData.items[i][0] + '');
}
//设置选中项
if (_thisData.selectValue) {
currentDrop.val(_thisData.selectValue);
_thisData.selectValue = '';
}
},
//参数data是指当前变化的下拉框所在的对象
binddata: function (data) {
_thisData = data;
currentDrop = $('#' + _thisData.sourceID); //本身的节点而不是子级
if (_thisData.clearItem)
this.clear();
if (_thisData.items)
this.fillItem();
if (_thisData.childID) {
if (!currentDrop.data('binded')) { //判断是否绑定过事件，绑定过的不在绑定
currentDrop.data('binded', true);
var _firstChangeObj = _thisData; //由于下拉框的事件只有一个，而对应的对象有多个，所以这里的对象是绑定时的对象，而非正确的对象
currentDrop.bind('change', function () {
var rightChildItem = _firstChangeObj.getRightonChangeObj().childItem;
var thisValue = $('#' + _firstChangeObj.sourceID).val(); //获取当前变化的下拉框的值，注意不能用currentDrop代替，因为currentDrop也是旧的值
if (rightChildItem[thisValue]) {
console.log('cache');
rightChildItem[thisValue].bind(); //使用缓存的数据来绑定
}
else {
console.log('getdata');
//一个新的实例，并建立链表关系
var dropData = new $.ajaxDropDownData();
dropData.sourceID = _firstChangeObj.childID;
dropData.parentObj = _firstChangeObj;
rightChildItem[thisValue] = dropData; //设置缓存
if (_firstChangeObj.callback) //如果有回调函数则直接调用，否则调用系统自动生成的函数
_firstChangeObj.callback(thisValue, dropData); //回调函数
else {
var callback = $.ajaxDropDownBind.callbackPool[dropData.sourceID];
if (callback)
callback(thisValue, dropData);
}
}
});
}
if (_thisData.canChange)
currentDrop.change();
}
},
//绑定第一级下拉框
bindTopDrop: function (sourceID, items, selectValue, removeFirst, childID) {
var mydrop = new $.ajaxDropDownData();
mydrop.sourceID = sourceID;
mydrop.items = items;
if (!items || items.length == 0)
mydrop.clearItem = false;
mydrop.removeFirst = removeFirst;
mydrop.selectValue = selectValue;
mydrop.childID = childID;
mydrop.canChange = false;
mydrop.bind();
},
//绑定子级下拉框
bindCallback: function (sourceID, selectValue, removeFirst, childID, parentPostUrl) {
var callback = function (value, dropdownlist) {
var postData = {};
var parentObj = dropdownlist.parentObj;
while (parentObj) {
postData[parentObj.sourceID] = $('#' + parentObj.sourceID).val();
parentObj = parentObj.parentObj;
}
$.getJSON(parentPostUrl + '&jsoncallback=?', postData, function (data) {
dropdownlist.items = data;
dropdownlist.removeFirst = removeFirst;
dropdownlist.selectValue = selectValue;
dropdownlist.childID = childID;
dropdownlist.bind();
});
};
this.callbackPool[sourceID] = callback;
}
}
});

使用方法代码里有注释，不赘述，欢迎拍砖。
不知道怎么添加附件，把测试代码也一并贴上来，因为插件二需要服务器端的配合这里就不贴插件二的测试代码。
插件一测试代码
复制代码 代码如下:






select
{
margin-left: 10px;
}
body
{
font-size: 14px;
background-color: #CCCCCC;
}
td
{
border: 1px solid #FF6600;
padding: 5px;
text-align: left;
}
input
{
width: 80px;
}
input[type=checkbox]
{
width: 20px;
}