/**
*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>