在 系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望对大家有所帮助 : ）
lt CRIPT language="javascript">
/***************************************************************************************************************
* 文 件 名：selectListTools.js
* 创建时间：2004.6.23
* 创 建 人：LxcJie
* 文件描述：关于list列表框的一些工具方法
*
* 主要方法：
* 1， moveUp(oSelect,isToTop) －－－－－－－－－－－－ 向上移动一个list列表框的选中项目，
* 可以支持多选移动，可以设置是否移动到顶层
* 2， moveDown(oSelect,isToBottom)－－－－－－－－－－ 向下移动一个list列表框的选中项目，
* 可以支持多选移动，可以设置是否移动到底层
* 3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在两个列表框之间转移数据
* 4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 转移两个列表框之间的全部数据
* 5， deleteSelectItem(oSelect) －－－－－－－－－－－ 删除所选的项目
*
****************************************************************************************************************/
/**
* added by LxcJie 2004.6.23
* 使选中的项目上移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到顶端，其它依次下移，
* true为移动到顶端，false反之，默认为false
*/
function moveUp(oSelect,isToTop)
{
//默认状态不是移动到顶端
if(isToTop == null)
var isToTop = false;
//如果是多选------------------------------------------------------------------
if(oSelect.multiple)
{
for(var selIndex=0; selIndex<oSelect.optio .length; selIndex++)
{
//如果设置了移动到顶端标志
if(isToTop)
{
if(oSelect.optio [selIndex].selected)
{
var tra ferIndex = selIndex;
while(tra ferIndex > 0 &am am !oSelect.optio [tra ferIndex - 1].selected)
{
oSelect.optio [tra ferIndex].swa ode(oSelect.optio [tra ferIndex - 1]);
tra ferIndex --;
}
}
}
//没有设置移动到顶端标志
else
{
if(oSelect.optio [selIndex].selected)
{
if(selIndex > 0)
{
if(!oSelect.optio [selIndex - 1].selected)
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex - 1]);
}
}
}
}
}
//如果是单选--------------------------------------------------------------------
else
{
var selIndex = oSelect.selectedIndex;
if(selIndex <= 0)
retur
//如果设置了移动到顶端标志
if(isToTop)
{
while(selIndex > 0)
{
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex - 1]);
selIndex --;
}
}
//没有设置移动到顶端标志
else
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex - 1]);
}
}
/**
* added by LxcJie 2004.6.23
* 使选中的项目下移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到底端，其它依次上移，
* true为移动到底端，false反之，默认为false
*/
function moveDown(oSelect,isToBottom)
{
//默认状态不是移动到顶端
if(isToBottom == null)
var isToBottom = false;
var selLength = oSelect.optio .length - 1;
//如果是多选------------------------------------------------------------------
if(oSelect.multiple)
{
for(var selIndex=oSelect.optio .length - 1; selIndex>= 0; selIndex--)
{
//如果设置了移动到顶端标志
if(isToBottom)
{
if(oSelect.optio [selIndex].selected)
{
var tra ferIndex = selIndex;
while(tra ferIndex < selLength &am am !oSelect.optio [tra ferIndex + 1].selected)
{
oSelect.optio [tra ferIndex].swa ode(oSelect.optio [tra ferIndex + 1]);
tra ferIndex ++;
}
}
}
//没有设置移动到顶端标志
else
{
if(oSelect.optio [selIndex].selected)
{
if(selIndex < selLength)
{
if(!oSelect.optio [selIndex + 1].selected)
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex + 1]);
}
}
}
}
}
//如果是单选--------------------------------------------------------------------
else
{
var selIndex = oSelect.selectedIndex;
if(selIndex >= selLength - 1)
retur
//如果设置了移动到顶端标志
if(isToBottom)
{
while(selIndex < selLength - 1)
{
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex + 1]);
selIndex ++;
}
}
//没有设置移动到顶端标志
else
oSelect.optio [selIndex].swa ode(oSelect.optio [selIndex + 1]);
}
}
/**
* added by LxcJie 2004.6.23
* 移动select的部分内容,必须存在value，此函数以value为标准进行移动
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveSelected(oSourceSel,oTargetSel)
{
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//此数组存贮选中的optio ，以value来对应
var arrValueTextRelation = new Array();
var index = 0;//用来辅助建立缓存数组
//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
for(var i=0; i<oSourceSel.optio .length; i++)
{
if(oSourceSel.optio [i].selected)
{
//存储
arrSelValue[index] = oSourceSel.optio [i].value;
arrSelText[index] = oSourceSel.optio [i].text;
//建立value和选中option的对应关系
arrValueTextRelation[arrSelValue[index]] = oSourceSel.optio [i];
index ++;
}
}
//增加缓存的数据到目的列表框中，并删除源列表框中的对应项
for(var i=0; i<arrSelText.length; i++)
{
//增加
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
//删除源列表框中的对应项
oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
}
/**
* added by LxcJie 2004.6.23
* 移动select的整块内容
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveAll(oSourceSel,oTargetSel)
{
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//存储所有源列表框数据到缓存数组
for(var i=0; i<oSourceSel.optio .length; i++)
{
arrSelValue[i] = oSourceSel.optio [i].value;
arrSelText[i] = oSourceSel.optio [i].text;
}
//将缓存数组的数据增加到目的select中
for(var i=0; i<arrSelText.length; i++)
{
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
}
//清空源列表框数据，完成移动
oSourceSel.i erHTML = "";
}
/**
* added by LxcJie 2004.6.23
* 删除选定项目
*
* oSelect: 源列表框对象
*/
function deleteSelectItem(oSelect)
{
for(var i=0; i<oSelect.optio .length; i++)
{
if(i>=0 &am am i<=oSelect.optio .length-1 &am am oSelect.optio [i].selected)
{
oSelect.optio [i] = null;
i --;
}
}
}
//js文件完毕
lt;/SCRIPT>
lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312">
lt ODY style="font-size:12px">
lt;FORM name="form1" method="post" action="">
< ELECT name="left" size="10" id="select" multiple style="width:100px; ">
<OPTION value="aaaaa">aaaaa</OPTIO gt;
<OPTION value=" "> lt;/OPTIO gt;
<OPTION value="ccccc">ccccc</OPTIO gt;
</SELECT>
<I UT style="border:1px solid black " type="button" value="> gt gt;" onClick="moveSelected(document.all.left,document.all.right)">
<I UT style="border:1px solid black " type="button" value="< lt lt;" onClick="moveSelected(document.all.right,document.all.left)">
< ELECT name="right" size="10" id="select" multiple style="width:100px; ">
<OPTION value="ddddd">ddddd</OPTIO gt;
<OPTION value="eeeee">eeeee</OPTIO gt;
<OPTION value="fffff">fffff</OPTIO gt;
<OPTION value="ggggg">ggggg</OPTIO gt;
<OPTION value="hhhhh">hhhhh</OPTIO gt;
<OPTION value="iiiii">iiiii</OPTIO gt;
</SELECT>
< r> lt r> lt r> lt r>
<DIV style="background-color:#CCCCCC adding:2px">
<I UT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">
<I UT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">
<I UT style="border:1px solid black " type="button" value="上移到顶"
onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">
<I UT style="border:1px solid black " type="button" value="下移到顶"
onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);"> （支持多选移动）
</DIV>
< R> lt R>
<DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative">
右移：<I UT type="radio" name="ifAll" value="right" checked> < r>
左移：<I UT type="radio" name="ifAll" value="left"> lt r> lt r>
<I UT type="button" value="移动全部" style="border:1px solid black " onClick="judgeMove()">
</DIV>
< r> lt r>
<DIV style="background-color:#CCCCCC; padding:5px">
<I UT type="button" value=" 删 除 " style="border:1px solid black "
onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">
</div>
lt;/FORM>
lt;/BODY>
lt CRIPT language="javascript">
function judgeMove()
{
var arrRadio = document.all.ifAll;
var valOfRadio;
for(var i=0; i<arrRadio.length; i++)
{
if(arrRadio[i].checked)
{
valOfRadio = arrRadio[i].value;
break;
}
}
if(valOfRadio == "left")
moveAll(document.all.right,document.all.left);
if(valOfRadio == "right")
moveAll(document.all.left,document.all.right);
}
lt;/SCRIPT>