Infinite cascading drop-down box js plugin based on jquery_jquery

In terms of flexibility, many aspects have been considered, and several important configurations are provided to facilitate use in various environments. Children's shoes are welcome to use, and the source code is completely open. The reason for developing this plug-in was that I was frustrated by maintaining a 4-level cascading drop-down box some time ago and was frustrated by the 200 lines of code, complex structure and bugs in it (the reason why there are so many codes is because sometimes only 2 or 3 of the cascading drop-down boxes appear. ), thinking that this kind of demand is actually often encountered. There is no such better plug-in in jquery, so I might as well develop one myself. The source code is not complicated. The slightly more complicated part is the use of cache in the second plug-in, which makes it very difficult to understand. I will explain it later.
Plug-in 1: Suitable for use when there is no AJAX interaction with the server. All drop-down box data needs to be read out in advance.
Plug-in 2: Suitable for each child drop-down box to be posted to the server for data binding. The excellence is that it will cache used data to achieve high efficiency. Note: the cached key value is not only the value of the parent drop-down box, but the combination of values ​​from the top-level drop-down box to the current parent drop-down box. This is In order to deal with the situation where the children corresponding to the same parent drop-down box are not the same. For the same reason, the form sent back to the server in postback also includes the values ​​of all parent drop-down boxes.

Copy code The code is as follows:

/*
* Cascading drop-down box Jqueyr plug-in, V1.2
* Copyright 2011, Leo.Liu
* This plug-in includes 2 refresh-free cascading drop-down box plug-ins:
* Plug-in 1: cascadeDropDownData is used when there is no AJAX interaction with the server, and all drop-down box data needs to be read out in advance. demo:
* Method 1: var dataItem = [['all', '-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'}
}
});
* This method has flaws: a) The value of the drop-down box must not be the same as the parent value in the parent-child correspondence b) The select-all rule cannot be set
*
* Method 2: var data = [['all', '0'], ['a001', 'a001'], ['a002', 'a002'], ['a003', 'a003' ]];
var data2 = [['all', '0', '0'], ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001' ], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a003']];
var data3 = [['all', '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' });
* For method three, see the content of cascadeDropDownBind.bind
*/
jQuery.extend({
//The data object of the drop-down box
cascadeDropDownData: function () {
//*** ***Configuration Properties************
this.removeFirst = true; //Whether to remove the first item
this.appentAllValue = ''; //If the value of the parent item is equal to this value Then display all items
this.sourceID = ''; //This drop-down box ID
this.parentID = ''; //Parent drop-down box ID
this.items = []; //Item's Data, two-dimensional array, form: [['text', 'value', 'parent ID'],...]; The value and parent ID can be omitted
this.selectValue = ''; // Initialize the selected item
this.parentValue = null; //Used to filter out the items required for the group from a pile of data, generally used to bind the first drop-down box
//**** **Configuration Properties*******
//The following are global variables, no need to set them externally
this.child = null;
var currentDrop = null;
this.bind = function () {
currentDrop = $('#' this.sourceID);
this.clear();
//Fill data items
this.fillItem();
//Settings Selected item
if (this.selectValue) {
currentDrop.val(this.selectValue);
}
//Set the change event of the parent drop-down box
this.setChange();
};
//Clear the filled items
this.clear = function () {
if (this.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0].options.length - 1; i > 0; i--) {
currentDrop[0].options[i] = null;
}
}
};
//Fill data items
this.fillItem = function () {
var _parentValue = this.parentValue;
if (this.parentID)
_parentValue = $( '#' this.parentID).val();
var all = false;
if (this.appentAllValue && _parentValue == this.appentAllValue)
all = true;
$.each( this.items, function (index, item) {
var val = item.length > 1 ? item[1] : item[0]; //If value is not specified, use text instead
if (all || item.length currentDrop.append('' item[0] '');
}
});
};
//Set the change event of the parent drop-down box
this.setChange = function () {
if (this.parentID) {
$('#' this.parentID).bind('change', this.change);
}
} ;
//Parent drop-down box event callback function
var _this = this;
this.change = function () {
_this.clear();
_this.fillItem();
currentDrop.change();
};
},
cascadeDropDownBind: {
bind: function (data, setting) {
var obj = new $.cascadeDropDownData();
$.extend(obj, setting);
obj.items = data;
obj.bind();
if (setting.child) {
setting.child.parentID = setting. sourceID
this.bind(data, setting.child);
}
}
}
});
/*
* Plug-in 2: ajaxDropDownData applies to each child Level drop-down boxes are posted to the server for data binding.
* The great thing about this plug-in is that it will cache used data to achieve high efficiency.
* Note: The cached key value is not only the value of the parent drop-down box, but the value combination from the top-level drop-down box to the current parent drop-down box. This is to deal with the occurrence of different children corresponding to the same parent drop-down box.
* For the same reason, the form sent back to the server in postback also includes the values ​​​​of all parent drop-down boxes
* Usage:
var firstItems = null; //You can also put the first item The data array of a drop-down box is placed here for binding, or set to empty and the drop-down box is not changed.
$.ajaxDropDownBind.bindTopDrop('Select1', firstItems, null, false, 'Select2');
$.ajaxDropDownBind.bindCallback('Select2', null, false, 'Select3', 'http:// localhost:4167/GetDropDownData.ashx?action=select1');
$.ajaxDropDownBind.bindCallback('Select3', null, false, null, 'http://localhost:4167/GetDropDownData.ashx?action=select2' );
$('#Select1').change();
* The most important thing is that the cascaded ID setting cannot be missing. For advanced usage, see the $.ajaxDropDownBind.bindCallback method.
*/
jQuery.extend({
//This object is a linked list structure
ajaxDropDownData: function () {
//******Configuration properties************
this.sourceID = ''; //This drop-down box ID
this.items = []; //The data of this item, two-dimensional array, Format: [['Text', 'Value', 'Parent ID'],...]; The value and parent ID can be omitted
this.callback = null; //Callback function, used to obtain the next A first-level method, this function receives two parameters: value and dropdownlist respectively represent the value selected by the parent drop-down box and its own instance
this.childID = ''; //Associated child control ID
this. removeFirst = true; //Whether to remove the first option of this item
this.selectValue = ''; //Initialize the selected value of this item
//******Configuration properties**** ***
//**********************The following are the system variables and methods****************** ************************************
this.childItem = []; //child object List for caching
this.parentObj = null; //Parent object
this.canChange = true;
this.clearItem = true;
this.bind = function () {
$.ajaxDropDownBind.bindData(this);
};
this.bindData = function (setting) {
$.extend(this, setting);
$.ajaxDropDownBind.bindData(this);
};
/*Backtrack to the root node, and start from the root node to get the current correct drop-down box object according to the cascade
Since there is only one event of the drop-down box, and there are multiple corresponding objects, so Here you need to go back to the root first, and then start from the root
*/
this.getRightOnChangeObj = function () {
if (this.parentObj)
return this.parentObj.getRightOnChangeObj().childItem[$('#' this.parentObj.sourceID).val()]; //Recursion
else
return this;
}
},
ajaxDropDownBind: {
currentDrop: null,
_thisData: null,
callbackPool: [],
// Clear filled items
clear: function () {
if (_thisData.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0]. options.length - 1; i > 0; i--) {
currentDrop[0].options[i] = null;
}
}
},
//Filling Data item
fillItem: function () {
for (var i = 0; i var val = _thisData.items[i].length > 1 ? _thisData.items[i][1] : _thisData.items[i][0]; //If value is not specified, use text instead
currentDrop.append('');
}
//Set the selected item
if (_thisData.selectValue) {
currentDrop.val(_thisData .selectValue);
_thisData.selectValue = '';
}
},
//The parameter data refers to the object where the currently changed drop-down box is located
bindData: function (data) {
_thisData = data;
currentDrop = $('#' _thisData.sourceID); //The node itself instead of the child
if (_thisData.clearItem)
this.clear();
if (_thisData.items)
this.fillItem();
if (_thisData.childID) {
if (!currentDrop.data('binded')) { // Determine whether it has been bound Events, those that have been bound are no longer bound
currentDrop.data('binded', true);
var _firstChangeObj = _thisData; //Since there is only one event for the drop-down box, and there are multiple corresponding objects, so The object here is the object when binding, not the correct object
currentDrop.bind('change', function () {
var rightChildItem = _firstChangeObj.getRightOnChangeObj().childItem;
var thisValue = $('#' _firstChangeObj.sourceID).val(); //Get the value of the currently changed drop-down box. Note that currentDrop cannot be used instead, because currentDrop is also the old value
if (rightChildItem[thisValue]) {
console.log('cache');
rightChildItem[thisValue].bind(); //Use cached data to bind
}
else {
console.log('getdata' );
//A new instance and establish a linked list relationship
var dropData = new $.ajaxDropDownData();
dropData.sourceID = _firstChangeObj.childID;
dropData.parentObj = _firstChangeObj;
rightChildItem[thisValue] = dropData; //Set cache
if (_firstChangeObj.callback) //If there is a callback function, call it directly, otherwise call the function automatically generated by the system
_firstChangeObj.callback(thisValue, dropData) ; //Callback function
else {
var callback = $.ajaxDropDownBind.callbackPool[dropData.sourceID];
if (callback)
callback(thisValue, dropData);
}
}
});
}
if (_thisData.canChange)
currentDrop.change();
}
},
//Bind the first level drop-down Box
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();
},
//Bind child drop-down box
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;
}
}
});

There are comments in the usage code, so I won’t go into details. You are welcome to contribute.
I don’t know how to add attachments, so I’ll post the test code too. Because plug-in 2 requires the cooperation of the server, I won’t post the test code for plug-in 2 here.
Plug-in 1 test code

Copy code The code is as follows:

无限极级联下拉框的封装

绑定方法：第一种方法
第二种方法

第一个下拉框：	设置当前项的选中值
第二个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选
第三个下拉框：	设置当前项的选中值	是否移除第一项	当前一项值等于此值时，该项全选

下拉框结果：