Jquery-based infinite cascade drop-down box js plug-in _ jquery

First, I declare that the jquery plug-ins of the two no-matter cascade drop-down boxes are completely original. After strict tests, the correct use of the plug-ins does not show bug flexibility. I have considered many aspects, several important configurations are provided to facilitate use in various environments. You are welcome to use the shoes. The source code is fully open. The reason for developing this plug-in is that some time ago, maintaining a level-4 cascade drop-down box was frustrated by the 200 lines of code and complicated structures and bugs in the box. (The reason is that this cascade drop-down box sometimes only shows 2 ), this kind of requirements can often be met. jquery does not have such a good plug-in, so you can develop it yourself. The source code is not complex. The second plug-in uses the cache, which makes it very difficult to understand and will be explained later.
Plug-in 1: This plug-in is suitable for use without AJAX interaction with the server. You must read all the data in the drop-down list in advance.
Plug-in 2: Applicable to data binding when each sub-level drop-down box is post to the server. The advantage is that it caches used data for efficient purposes. Note: The cached key value is not only the value of the parent drop-down box, it is a combination of values from the top-level drop-down box to the current parent drop-down box. This is used to deal with the situation where the child level corresponding to the same parent drop-down box is different. For the same reason, the form returned to the server in postback also contains the values of all parent drop-down boxes.

The Code is as follows:

/*
* Cascade drop-down box Jqueyr plug-in, V1.2
* Copyright 2011, Leo. Liu
* This plug-in includes two plug-ins:
* Plug-in 1: cascadeDropDownData is used without AJAX interaction with the server. You must read all the data in the drop-down list 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'], ['b002', 'b003 ', 'a002 '], ['b004', 'b004 ', 'a003']
, ['C001', '001', 'b001'], ['c002', '002', 'b001'], ['c002', '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 a defect: a) the value in the drop-down list must not be the same as the parent value in the parent and child maps. B) You cannot set a full selection rule.
*
* Method 2: var data = [['all', '0'], ['a001', 'a001'], ['a002', 'a002'], ['a003 ', 'a003'];
Var data2 = [['all', '0', '0'], ['b001', 'b001', 'a001'], ['b002 ', 'b002', 'a001'], ['b002', 'b002', 'a002'], ['b002', 'b002', '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 '});
* Method 3 refer to cascadeDropDownBind. bind.
*/
JQuery. extend ({
// Data object in the drop-down list
CascadeDropDownData: function (){
// ****** Configure attributes *******
This. removeFirst = true; // whether to remove the first item
This. appentAllValue = ''; // if the value of the Parent Project is equal to this value, all items are displayed.
This. sourceID = ''; // the ID of the drop-down list.
This. parentID = ''; // parent drop-down box ID
This. items = []; // item 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 this group from a pile of data. It is generally used to bind the first drop-down box.
// ****** Configure attributes *******
// The following are global variables that do not need to be set externally.
This. child = null;
Var currentDrop = null;
This. bind = function (){
CurrentDrop = $ ('#' + this. sourceID );
This. clear ();
// Fill in the Data Project
This. fillItem ();
// Set the selected item
If (this. selectValue ){
CurrentDrop. val (this. selectValue );
}
// Set the change event in the parent drop-down box
This. setChange ();
};
// Clear the filled project
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 in the Data Project
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 no value is specified, use text instead.
If (all | item. length <= 2 | item [2] = _ parentValue) {// if the length is smaller than 3, it is deemed that there is no parent drop-down box to fill in all items
CurrentDrop. append (''+ Item [0] +'');
}
});
};
// Set the change event in the parent drop-down box
This. setChange = function (){
If (this. parentID ){
$ ('#' + This. parentID). bind ('change', this. change );
}
};
// Callback function of the parent drop-down box
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 binding data to the server after each sub-level drop-down box is post.
* The plug-in is excellent in that it caches used data for high efficiency.
* Note: The cached key value is not only the value of the parent drop-down box, but a combination of values from the top-level drop-down box to the current parent drop-down box, this is to deal with situations where the child levels corresponding to the same parent drop-down box are different.
* For the same reason, the form returned to the server in postback also contains the values of all parent drop-down boxes.
* Usage:
Var firstItems = null; // You can also bind the data array in the first drop-down box, or set it to null without changing the drop-down box.
$. AjaxDropDownBind. bindtopddrop ('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 cascade ID settings cannot be missing. For advanced usage, see $. ajaxDropDownBind. bindCallback.
*/
JQuery. extend ({
// This object is a linked list Structure
AjaxDropDownData: function (){
// ****** Configure attributes *******
This. sourceID = ''; // the ID of the drop-down list.
This. items = []; // The data of this item, which is a two-dimensional array in the form of [['text', 'value', 'parent id'], ......]; the value and parent ID can be omitted.
This. callback = null; // callback function, used to obtain the method of the next level. this function receives two parameters: value and dropdownlist, which respectively represent the value selected in the parent level drop-down box and its own instance.
This. childID = ''; // ID of the associated Child Control
This. removeFirst = true; // whether to remove the first option of the item
This. selectValue = ''; // this item initializes the selected value.
// ****** Configure attributes *******
// ******************** The system variables and Methods ************ ****************************************
This. childItem = []; // sub-Object List, used 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 );
};
/* Go Back To The root node and obtain the objects in the correct drop-down box from the root node according to cascade
Because there is only one event in the drop-down box, and there are multiple objects, we need to first trace back to the root and start searching 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 the filled project
Clear: function (){
If (_ thisData. removeFirst ){
CurrentDrop. empty ();
} Else {
For (var I = currentDrop [0]. options. length-1; I> 0; I --){
CurrentDrop [0]. options [I] = null;
}
}
},
// Fill in the Data Project
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]; // if no value is specified, use text instead.
CurrentDrop. append (''+ _ ThisData. items [I] [0] +'');
}
// Set the selected item
If (_ thisData. selectValue ){
CurrentDrop. val (_ thisData. selectValue );
_ ThisData. selectValue = '';
}
},
// The parameter data is the object of the currently changed drop-down box.
BindData: function (data ){
_ ThisData = data;
CurrentDrop = $ ('#' + _ thisData. sourceID); // its own node instead of its child
If (_ thisData. clearItem)
This. clear ();
If (_ thisData. items)
This. fillItem ();
If (_ thisData. childID ){
If (! CurrentDrop. data ('binded') {// determines whether an event has been bound. events that have been bound are not bound.
CurrentDrop. data ('binded', true );
Var _ firstChangeObj = _ thisData; // because there is only one event in the drop-down box, and there are multiple corresponding objects, the objects here are the objects at the time of binding, not the correct objects
CurrentDrop. bind ('change', function (){
Var rightChildItem = _ firstChangeObj. getRightOnChangeObj (). childItem;
Var thisValue = $ ('#' + _ firstChangeObj. sourceID ). val (); // obtain the value of the currently changed drop-down box. Note that currentDrop cannot be used, 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 ');
// Create a new instance and establish a linked list
Var dropData = new $. ajaxDropDownData ();
DropData. sourceID = _ firstChangeObj. childID;
DropData. parentObj = _ firstChangeObj;
RightChildItem [thisValue] = dropData; // sets the cache
If (_ firstChangeObj. callback) // if a callback function exists, 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
Bindtopddrop: 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 a sub-level drop-down list
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. Do not repeat them. You are welcome to make a brick.
I don't know how to add the attachment and paste the test code together, because plug-in 2 requires the server side to work together, so I won't paste the test code of plug-in 2 here.
Plug-in 1 test code

The Code is as follows:

Encapsulation of infinitus cascade drop-down boxes