/**
*WRITE BY :惠萬鵬
*DATE :2008-06-10
*VERSION :1.0
*DESCRIPTION:
*/
var SelUtil =
{
/**
*對二維數組進行排序
*arr :將要排序的數組
*dimIndex :按第幾維排序,可選值0或1
*ascOrDexc:按升序或降序,可先值為0或1
*返回一個已經排好序的數組
*/
__sortDyadicArray : function (arr, dimIndex, ascOrDesc)
{
var tempArr = null;
/** 使用選擇排序法排序*/
for(var m = 0; m < arr.length-1; m++)
{
var index = m;
for(var n = m + 1; n < arr.length; n++){
/** 按第一維升序排序 */
if(dimIndex == 0 && ascOrDesc == 0
&& arr[n][0] < arr[index][0])
{
index = n;
}
/** 按第一維降序排列 */
else if(dimIndex == 0 && ascOrDesc == 1
&& arr[n][0] > arr[index][0])
{
index = n;
}
/** 按第二維升序排序 */
else if(dimIndex == 1 && ascOrDesc == 0
&& arr[n][1] < arr[index][1])
{
index = n;
}
/** 按第二維降序排列 */
else if(dimIndex == 1 && ascOrDesc == 1
&& arr[n][1] > arr[index][1])
{
index = n;
}
}
tempArr = arr[m];
arr[m] = arr[index];
arr[index] = tempArr;
}
return arr;
},
/**向Sel中加入一項
*oListbox:列表對象
*sName :Listbox文本
*sValue :Listbox值
*/
__add : function (oListbox, sValue, sName, sInitValue)
{
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(sName));
if (arguments.length == 4)
{
oOption.setAttribute("value",sValue);
if(sValue == sInitValue)
{
oOption.setAttribute("selected",true);
}
oListbox.appendChild(oOption);
}
},
/**
*從二維數中加入多個option
*oListbox :列表對象
*dyadicArray:二維數組
*/
__addAll : function (oListbox, dyadicArray, sSelected)
{
for(var i = 0; i < dyadicArray.length; i++)
{
this.__add(oListbox, dyadicArray[i][0], dyadicArray[i][1], sSelected);
}
},
/*
*從Sel中刪除一項
*oListbox:列表對象
*iIndex :項的索引號
*/
__remove : function (oListbox, iIndex)
{
oListbox.remove(iIndex);
},
/*
*清空Sel的所有項
*oListbox:列表對象
*/
__clear : function (oListbox)
{
for (var i = oListbox.options.length - 1; i >= 0; i--)
{
this.__remove(oListbox, i);
}
},
/**
*兩個Sel中相互移動
*oListboxFrom:將要被移除的列表
*oListboxTo :將要被移到的列表
*iIndex :項的索引號
*/
__move : function (oListboxFrom, oListboxTo, iIndex)
{
var oOption = oListboxFrom.options(iIndex);
if(oOption !== null)
{
oListboxTo.appendChild(oOption);
}
},
/**
*把所有選中的項移到另一個列表
*oListboxFrom:將要被移到的列表
*oListboxTo :將要被移到的列表
*/
__moveAll : function (oListboxFrom, oListboxTo,type)
{
var indexes = this.__getIndexes(oListboxFrom,type);
for(var i = indexes.length - 1; i >= 0; i --)
{
this.__move(oListboxFrom, oListboxTo, indexes[i]);
}
},
/**
*把指定索引的項上移一個位置
*oListbox:列表對象
*iIndex :索引號
*/
__shiftUp : function (oListbox, iIndex)
{
if(iIndex > 0)
{
var oOption = oListbox.options[iIndex];
var oPrevOption = oListbox.options[iIndex - 1];
oListbox.insertBefore(oOption, oPrevOption);
}
},
/**
*把指定索引的項下移一個位置
*oListbox:列表對象
*iIndex :索引號
*/
__shiftDown : function (oListbox, iIndex)
{
if (iIndex < oListbox.options.length - 1)
{
var oOption = oListbox.options[iIndex];
var oNextOption = oListbox.options[iIndex + 1];
oListbox.insertBefore(oNextOption, oOption);
}
},
/**
*得到選中的索引
*oListbox:列表對像
*type :可選值:1選中的index,0全部index,-1沒選中的index
*/
__getIndexes : function (oListbox, type)
{
var arrIndexes = new Array;
for(var i = 0; i < oListbox.options.length; i++)
{
if(type == 1)
{
if (oListbox.options[i].selected)
{
arrIndexes.push(i);
}
}
else if(type == 0)
{
arrIndexes.push(i);
}
else if(type == -1)
{
if (!oListbox.options[i].selected)
{
arrIndexes.push(i);
}
}
}
return arrIndexes;
},
/**
*把一個字符串轉換成一個二維數組
*str:帶有分隔符的字符串
*/
__strToDyadicArray : function (str)
{
var kvs = str.split('|');
var dyadicArray = new Array(kvs.length);
for(var i = 0; i < kvs.length; i++)
{
dyadicArray[i] = new Array(2);
dyadicArray[i][0] = kvs[i].substring(0, kvs[i].indexOf(":"));
dyadicArray[i][1] = kvs[i].substring(kvs[i].indexOf(":") + 1, kvs[i].length);
}
return dyadicArray;
},
/**
*初始化一個Sel
*SelId :Sel的id
*str :初始化字符串
*sDefault:默認值
*/
initSel : function(selId, str, sSelected)
{
if(str.length > 0)
{
var kvs = this.__strToDyadicArray(str);
oSel = document.getElementById(selId);
this.__addAll(oSel,kvs,sSelected);
}
},
/**
*初始化兩個Sel
*selLeftId :左邊Sel的id
*selRightId:右邊Sel的id
*strLeft :左邊初始化字符串
*strRight :右邊初始化字符串
*/
initDouSel : function(selLeftId, selRightId, strLeft, strRight)
{
this.initSel(selLeftId, strLeft, 'XXXX');
this.initSel(selRightId, strRight, 'XXXX');
},
/**
*左邊全部移到右邊
*selLeftId :左邊列表id
*selRightId:右邊列表id
*bla :button left all
*blp :button left part
*bra :button right all
*brp :button right part
*/
leftSelToRightSelAll : function(selLeftId, selRightId, bla, blp, bra, brp)
{
var oSelLeft = document.getElementById(selLeftId);
var oSelRight = document.getElementById(selRightId);
this.__moveAll(oSelLeft,oSelRight,0);
document.getElementById(bla).disabled = true;
document.getElementById(blp).disabled = true;
document.getElementById(bra).disabled = false;
document.getElementById(brp).disabled = false;
},
/**
*左邊選中的項全部移到右邊
*selLeftId :左邊列表id
*selRightId:右邊列表id
*bla :button left all
*blp :button left part
*bra :button right all
*brp :button right part
*/
leftSelToRightSelPart : function(selLeftId, selRightId, bla, blp, bra, brp)
{
var oSelLeft = document.getElementById(selLeftId);
var oSelRight = document.getElementById(selRightId);
this.__moveAll(oSelLeft,oSelRight,1);
if(this.__getIndexes(oSelLeft,0).length == 0)
{
document.getElementById(bla).disabled = true;
document.getElementById(blp).disabled = true;
}
else
{
document.getElementById(bla).disabled = false;
document.getElementById(blp).disabled = false;
}
document.getElementById(bra).disabled = false;
document.getElementById(brp).disabled = false;
},
/**
*右邊全部移到左邊
*selLeftId :左邊列表id
*selRightId:右邊列表id
*bla :button left all
*blp :button left part
*bra :button right all
*brp :button right part
*/
rightSelToleftSelAll : function(selLeftId, selRightId, bla, blp, bra, brp)
{
var oSelLeft = document.getElementById(selLeftId);
var oSelRight = document.getElementById(selRightId);
this.__moveAll(oSelRight,oSelLeft,0);
document.getElementById(bra).disabled = true;
document.getElementById(brp).disabled = true;
document.getElementById(bla).disabled = false;
document.getElementById(blp).disabled = false;
},
/**
*左邊選中的項全部移到右邊
*selLeftId :左邊列表id
*selRightId:右邊列表id
*bla :button left all
*blp :button left part
*bra :button right all
*brp :button right part
*/
rightSelToLeftSelPart : function(selLeftId, selRightId, bla, blp, bra, brp)
{
var oSelLeft = document.getElementById(selLeftId);
var oSelRight = document.getElementById(selRightId);
this.__moveAll(oSelRight, oSelLeft, 1);
if(this.__getIndexes(oSelRight,0).length == 0)
{
document.getElementById(bra).disabled = true;
document.getElementById(brp).disabled = true;
}
else
{
document.getElementById(bra).disabled = false;
document.getElementById(brp).disabled = false;
}
document.getElementById(bla).disabled = false;
document.getElementById(blp).disabled = false;
}
}
使用方法:
<html>
<head>
<title>Two-Select</title>
<script language="javascript" src="/SelUtil.js" charset="gb2312"></script>
</head>
<body>
<select id="s1" style="width:80;height:100;float:left" multiple></select>
<div style="width:50;height:100;margin:5px;float:left;text-align:center;">
<input type="button" id="b1" class="b1" value=">>"
onclick="SelUtil.leftSelToRightSelAll('s1','s2','b1','b2','b3','b4')">
<input type="button" id="b2" class="b2" value=">"
onclick="SelUtil.leftSelToRightSelPart('s1','s2','b1','b2','b3','b4')">
<input type="button" id="b3" class="b3" value="<"
onclick="SelUtil.rightSelToLeftSelPart('s1','s2','b1','b2','b3','b4')" >
<input type="button" id="b4" class="b4" value="<<"
onclick="SelUtil.rightSelToleftSelAll('s1','s2','b1','b2','b3','b4')" >
</div>
<select id="s2" style="width:80;height:100" multiple></select>
<script language='javascript'>
var str1 = "1:趙云|2:張遼|3:典韋";
var str2 = "4:呂布|5:張飛|6:關羽";
document.body.onload = function ()
{
SelUtil.initDouSel("s1","s2",str1,str2);
}
</script>
</body>
</html>