/*
* 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 <= 2 || item[2] == _parentValue) { //If the length is less than 3, it is considered that there is no parent drop-down box and all items will be filled
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 < _thisData.items.length; 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;
}
}
});

无限极级联下拉框的封装

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

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

下拉框结果：