/*
* 級(jí)聯(lián)下拉框Jqueyr插件，V1.2
* Copyright 2011, Leo.Liu
* 本插件包括2個(gè)無(wú)刷新級(jí)聯(lián)下拉框插件：
* 插件一：cascadeDropDownData是在不與服務(wù)器進(jìn)行AJAX交互情況使用，需預(yù)先將所有下拉框數(shù)據(jù)全部讀出。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)要求下拉框的值與父子對(duì)應(yīng)中的父值不能相同 b)不能設(shè)置全選規(guī)則
*
* 方法二：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' });
* 方法三參見(jiàn)cascadeDropDownBind.bind內(nèi)容
*/
jQuery.extend({
//下拉框的數(shù)據(jù)對(duì)象
cascadeDropDownData: function () {
//******配置屬性*******
this.removeFirst = true; //是否移除第一個(gè)項(xiàng)
this.appentAllValue = ''; //如果父項(xiàng)目的值等于此值則顯示所有項(xiàng)
this.sourceID = ''; //此下拉框ID
this.parentID = ''; //父下拉框ID
this.items = []; //項(xiàng)的數(shù)據(jù)，二維數(shù)組，形式：[['文本', '值', '父ID'],......]; 值和父ID可省略
this.selectValue = ''; //初始化選中的項(xiàng)
this.parentValue = null; //用于從一堆數(shù)據(jù)中篩選出該組所需的項(xiàng)，一般用于綁定第一個(gè)下拉框
//******配置屬性*******
//以下是全局變量，無(wú)需在外部設(shè)置
this.child = null;
var currentDrop = null;
this.bind = function () {
currentDrop = $('#' + this.sourceID);
this.clear();
//填充數(shù)據(jù)項(xiàng)目
this.fillItem();
//設(shè)置選中項(xiàng)
if (this.selectValue) {
currentDrop.val(this.selectValue);
}
//設(shè)置父下拉框的change事件
this.setChange();
};
//清理填充項(xiàng)目
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;
}
}
};
//填充數(shù)據(jù)項(xiàng)目
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]; //如果沒(méi)有指定value則用text代替
if (all || item.length <= 2 || item[2] == _parentValue) { //如果長(zhǎng)度小于3，認(rèn)為沒(méi)有父下拉框則填充所有項(xiàng)
currentDrop.append('<option value="' + val + '">' + item[0] + '</option>');
}
});
};
//設(shè)置父下拉框的change事件
this.setChange = function () {
if (this.parentID) {
$('#' + this.parentID).bind('change', this.change);
}
};
//父下拉框事件回調(diào)函數(shù)
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);
}
}
}
});
/*
* 插件二：ajaxDropDownData適用于每個(gè)子級(jí)下拉框都post到服務(wù)器中取數(shù)據(jù)綁定。
* 該插件優(yōu)秀之處在于會(huì)將已使用過(guò)的數(shù)據(jù)緩存達(dá)到高效率的目的。
* 注意：緩存的鍵值不僅僅是父下拉框的值，而是從頂級(jí)下拉框到當(dāng)前父下拉框的值組合，這是為了對(duì)付出現(xiàn)相同父下拉框?qū)?yīng)的子級(jí)并不相同的情況
* 同樣的原因，postback中回發(fā)給服務(wù)器的form表單中也是包括所有的父下拉框的值
* 使用方法：
var firstItems = null; //也可以將第一個(gè)下拉框的數(shù)據(jù)數(shù)組放到這進(jìn)行綁定，或者設(shè)置為空，不改變下拉框。
$.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();
* 最重要的是級(jí)聯(lián)的ID設(shè)置不能缺少。高級(jí)用法參見(jiàn)$.ajaxDropDownBind.bindCallback方法的內(nèi)容。
*/
jQuery.extend({
//此對(duì)象是個(gè)鏈表結(jié)構(gòu)
ajaxDropDownData: function () {
//******配置屬性*******
this.sourceID = ''; //此下拉框ID
this.items = []; //此項(xiàng)的數(shù)據(jù)，二維數(shù)組，形式：[['文本', '值', '父ID'],......]; 值和父ID可省略
this.callback = null; //回調(diào)函數(shù)，用于獲取下一級(jí)的方法，此函數(shù)接收2個(gè)參數(shù)：value, dropdownlist分別代表父級(jí)下拉框選中的值及本身的實(shí)例
this.childID = ''; //關(guān)聯(lián)的子控件ID
this.removeFirst = true; //是否移除該項(xiàng)第一個(gè)選項(xiàng)
this.selectValue = ''; //此項(xiàng)初始化選中的值
//******配置屬性*******
//********************下面是系統(tǒng)變量及方法****************************************************
this.childItem = []; //子對(duì)象列表，用于緩存
this.parentObj = null; //父對(duì)象
this.canChange = true;
this.clearItem = true;
this.bind = function () {
$.ajaxDropDownBind.bindData(this);
};
this.bindData = function (setting) {
$.extend(this, setting);
$.ajaxDropDownBind.bindData(this);
};
/*回溯到根節(jié)點(diǎn)，從根節(jié)點(diǎn)開(kāi)始按照級(jí)聯(lián)取當(dāng)前正確的下拉框的對(duì)象
由于下拉框的事件只有一個(gè)，而對(duì)應(yīng)的對(duì)象有多個(gè)，所以這里需要先回溯到根，在從根開(kāi)始找起
*/
this.getRightOnChangeObj = function () {
if (this.parentObj)
return this.parentObj.getRightOnChangeObj().childItem[$('#' + this.parentObj.sourceID).val()]; //遞歸
else
return this;
}
},
ajaxDropDownBind: {
currentDrop: null,
_thisData: null,
callbackPool: [],
//清理填充項(xiàng)目
clear: function () {
if (_thisData.removeFirst) {
currentDrop.empty();
} else {
for (var i = currentDrop[0].options.length - 1; i > 0; i--) {
currentDrop[0].options[i] = null;
}
}
},
//填充數(shù)據(jù)項(xiàng)目
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]; //如果沒(méi)有指定value則用text代替
currentDrop.append('<option value="' + val + '">' + _thisData.items[i][0] + '</option>');
}
//設(shè)置選中項(xiàng)
if (_thisData.selectValue) {
currentDrop.val(_thisData.selectValue);
_thisData.selectValue = '';
}
},
//參數(shù)data是指當(dāng)前變化的下拉框所在的對(duì)象
bindData: function (data) {
_thisData = data;
currentDrop = $('#' + _thisData.sourceID); //本身的節(jié)點(diǎn)而不是子級(jí)
if (_thisData.clearItem)
this.clear();
if (_thisData.items)
this.fillItem();
if (_thisData.childID) {
if (!currentDrop.data('binded')) { //判斷是否綁定過(guò)事件，綁定過(guò)的不在綁定
currentDrop.data('binded', true);
var _firstChangeObj = _thisData; //由于下拉框的事件只有一個(gè)，而對(duì)應(yīng)的對(duì)象有多個(gè)，所以這里的對(duì)象是綁定時(shí)的對(duì)象，而非正確的對(duì)象
currentDrop.bind('change', function () {
var rightChildItem = _firstChangeObj.getRightOnChangeObj().childItem;
var thisValue = $('#' + _firstChangeObj.sourceID).val(); //獲取當(dāng)前變化的下拉框的值，注意不能用currentDrop代替，因?yàn)閏urrentDrop也是舊的值
if (rightChildItem[thisValue]) {
console.log('cache');
rightChildItem[thisValue].bind(); //使用緩存的數(shù)據(jù)來(lái)綁定
}
else {
console.log('getdata');
//一個(gè)新的實(shí)例，并建立鏈表關(guān)系
var dropData = new $.ajaxDropDownData();
dropData.sourceID = _firstChangeObj.childID;
dropData.parentObj = _firstChangeObj;
rightChildItem[thisValue] = dropData; //設(shè)置緩存
if (_firstChangeObj.callback) //如果有回調(diào)函數(shù)則直接調(diào)用，否則調(diào)用系統(tǒng)自動(dòng)生成的函數(shù)
_firstChangeObj.callback(thisValue, dropData); //回調(diào)函數(shù)
else {
var callback = $.ajaxDropDownBind.callbackPool[dropData.sourceID];
if (callback)
callback(thisValue, dropData);
}
}
});
}
if (_thisData.canChange)
currentDrop.change();
}
},
//綁定第一級(jí)下拉框
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();
},
//綁定子級(jí)下拉框
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;
}
}
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無(wú)限極級(jí)聯(lián)下拉框的封裝</title>
<script type="text/javascript" src="http://test.fe.ecp.mic.cn/content/scripts/base/jquery.js"></script>
<style>
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;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
無(wú)限極級(jí)聯(lián)下拉框的封裝</h1>
<div style="margin: 50px 0 50px 10px;">
綁定方法：<select id="selCase"><option value="1">第一種方法</option>
<option value="2">第二種方法</option>
</select>
<input type="button" onclick="test()" value="綁定" />
<div style="margin: 10px;">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
第一個(gè)下拉框：
</td>
<td>
<input type="text" id="tb1sel" value="a002" />設(shè)置當(dāng)前項(xiàng)的選中值
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
第二個(gè)下拉框：
</td>
<td>
<input type="text" id="tb2sel" value="" />設(shè)置當(dāng)前項(xiàng)的選中值
</td>
<td>
<input type="checkbox" id="cb2Remove" value="" />是否移除第一項(xiàng)
</td>
<td>
<input type="text" id="tb2AllValue" value="0" />當(dāng)前一項(xiàng)值等于此值時(shí)，該項(xiàng)全選
</td>
</tr>
<tr>
<td>
第三個(gè)下拉框：
</td>
<td>
<input type="text" id="tb3sel" value="" />設(shè)置當(dāng)前項(xiàng)的選中值
</td>
<td>
<input type="checkbox" id="cb3Remove" />是否移除第一項(xiàng)
</td>
<td>
<input type="text" id="tb3AllValue" value="" />當(dāng)前一項(xiàng)值等于此值時(shí)，該項(xiàng)全選
</td>
</tr>
</table>
</div>
</div>
<h4>
下拉框結(jié)果：</h4>
<div id="selContainer" style="margin: 0px 0 50px 100px;">
</div>
<script type="text/javascript" src="/Scripts/Jquery.cascadeDropDown-1.2.js"></script>
<script type="text/javascript">
$(function () {
toggleSetting();
$('#selCase').bind('change', toggleSetting);
});
function toggleSetting() {
if ($('#selCase').val() == '1')
$('table tr').each(function (i, item) {
$($(item).find('td')[3]).hide();
});
else
$('table tr').each(function (i, item) {
$($(item).find('td')[3]).show();
});
}
function test() {
if ($('#selCase').val() == '1')
testcase1();
else
testcase2();
}
function testcase1() {
$('#Select1').remove();
$('#Select2').remove();
$('#Select3').remove();
$('#selContainer').html('<select id="Select1"><option value="-1">全部</option></select><select id="Select2"><option value="-1">全部</option></select><select id="Select3"><option value="-1">全部</option></select>');
var dataItem = [['a001', 'a001', '0'], ['a002', 'a002', '0'], ['a003', 'a003', '0']
, ['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a002'], ['b005', 'b005', 'a003']
, ['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b002'], ['c005', '005', 'b003'], ['c006', '006', 'b004'], ['c007', '007', 'b004'], ['c008', '008', 'b005']
];
$.cascadeDropDownBind.bind(dataItem,
{ sourceID: 'Select1', selectValue: $('#tb1sel').val(), parentValue: '0', removeFirst: false,
child: { sourceID: 'Select2', selectValue: $('#tb2sel').val(), removeFirst: $('#cb2Remove').attr('checked'),
child: { sourceID: 'Select3', selectValue: $('#tb3sel').val(), removeFirst: $('#cb3Remove').attr('checked') }
}
}
);
}
function testcase2() {
$('#Select1').remove();
$('#Select2').remove();
$('#Select3').remove();
//$('#selContainer').html('<select id="Select1"></select><select id="Select2"></select><select id="Select3"></select>');
$('#selContainer').html('<select id="Select1"><option value="0">全部</option></select><select id="Select2"><option value="0">全部</option></select><select id="Select3"><option value="0">全部</option></select>');
var data = [['a001', 'a001'], ['a002', 'a002'], ['a003', 'a003']];
var data2 = [['b001', 'b001', 'a001'], ['b002', 'b002', 'a001'], ['b003', 'b003', 'a002'], ['b004', 'b004', 'a002'], ['b005', 'b005', 'a003']];
var data3 = [['c001', '001', 'b001'], ['c002', '002', 'b001'], ['c003', '003', 'b002'], ['c004', '004', 'b002'], ['c005', '005', 'b003'], ['c006', '006', 'b004'], ['c007', '007', 'b004'], ['c008', '008', 'b005']];
$.cascadeDropDownBind.bind(data, { sourceID: 'Select1', selectValue: $('#tb1sel').val(), removeFirst: false });
$.cascadeDropDownBind.bind(data2, { sourceID: 'Select2', selectValue: $('#tb2sel').val(), parentID: 'Select1', removeFirst: $('#cb2Remove').attr('checked'), appentAllValue: $('#tb2AllValue').val() });
$.cascadeDropDownBind.bind(data3, { sourceID: 'Select3', selectValue: $('#tb2sel').val(), parentID: 'Select2', removeFirst: $('#cb3Remove').attr('checked'), appentAllValue: $('#tb3AllValue').val() });
}
</script>
</div>
</form>
</body>
</html>