select转移工具箱

在bs系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望对大家有所帮助 :）

把下面的内容拷贝到一个htm文件中即可以看到效果.

<SCRIPT 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.options.length; selIndex++)

{

//如果设置了移动到顶端标志

if(isToTop)

{

if(oSelect.options[selIndex].selected)

{

var transferIndex = selIndex;

while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)

{

oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);

transferIndex --;

}

}

}

//没有设置移动到顶端标志

else

{

if(oSelect.options[selIndex].selected)

{

if(selIndex > 0)

{

if(!oSelect.options[selIndex - 1].selected)

oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);

}

}

}

}

}

//如果是单选--------------------------------------------------------------------

else

{

var selIndex = oSelect.selectedIndex;

if(selIndex <= 0)

return;

//如果设置了移动到顶端标志

if(isToTop)

{

while(selIndex > 0)

{

oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);

selIndex --;

}

}

//没有设置移动到顶端标志

else

oSelect.options[selIndex].swapNode(oSelect.options[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.options.length - 1;

//如果是多选------------------------------------------------------------------

if(oSelect.multiple)

{

for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)

{

//如果设置了移动到顶端标志

if(isToBottom)

{

if(oSelect.options[selIndex].selected)

{

var transferIndex = selIndex;

while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)

{

oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);

transferIndex ++;

}

}

}

//没有设置移动到顶端标志

else

{

if(oSelect.options[selIndex].selected)

{

if(selIndex < selLength)

{

if(!oSelect.options[selIndex + 1].selected)

oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);

}

}

}

}

}

//如果是单选--------------------------------------------------------------------

else

{

var selIndex = oSelect.selectedIndex;

if(selIndex >= selLength - 1)

return;

//如果设置了移动到顶端标志

if(isToBottom)

{

while(selIndex < selLength - 1)

{

oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);

selIndex ++;

}

}

//没有设置移动到顶端标志

else

oSelect.options[selIndex].swapNode(oSelect.options[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();

//此数组存贮选中的options，以value来对应

var arrValueTextRelation = new Array();

var index = 0;//用来辅助建立缓存数组

//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系

for(var i=0; i<oSourceSel.options.length; i++)

{

if(oSourceSel.options[i].selected)

{

//存储

arrSelValue[index] = oSourceSel.options[i].value;

arrSelText[index] = oSourceSel.options[i].text;

//建立value和选中option的对应关系

arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[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.options.length; i++)

{

arrSelValue[i] = oSourceSel.options[i].value;

arrSelText[i] = oSourceSel.options[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.innerHTML = "";

}

/**

* added by LxcJie 2004.6.23

* 删除选定项目

*

* oSelect: 源列表框对象

*/

function deleteSelectItem(oSelect)

{

for(var i=0; i<oSelect.options.length; i++)

{

if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)

{

oSelect.options[i] = null;

i --;

}

}

}

//js文件完毕

</SCRIPT>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<BODY style="font-size:12px">

<FORM name="form1" method="post" action="">

<SELECT name="left" size="10" id="select" multiple style="width:100px; ">

<OPTION value="aaaaa">aaaaa</OPTION>

<OPTION value="bbbbb">bbbbb</OPTION>

<OPTION value="ccccc">ccccc</OPTION>

</SELECT>

<INPUT style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">

<INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">

<SELECT name="right" size="10" id="select" multiple style="width:100px; ">

<OPTION value="ddddd">ddddd</OPTION>

<OPTION value="eeeee">eeeee</OPTION>

<OPTION value="fffff">fffff</OPTION>

<OPTION value="ggggg">ggggg</OPTION>

<OPTION value="hhhhh">hhhhh</OPTION>

<OPTION value="iiiii">iiiii</OPTION>

</SELECT>

<br><br><br><br>

<DIV style="background-color:#CCCCCC;padding:2px">

<INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">

<INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">

<INPUT style="border:1px solid black " type="button" value="上移到顶"

onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">

<INPUT style="border:1px solid black " type="button" value="下移到顶"

onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);"> （支持多选移动）

</DIV>

<BR><BR>

<DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative">

右移：<INPUT type="radio" name="ifAll" value="right" checked> <br>

左移：<INPUT type="radio" name="ifAll" value="left"><br><br>

<INPUT type="button" value="移动全部" style="border:1px solid black " onClick="judgeMove()">&nbsp;

</DIV>

<br><br>

<DIV style="background-color:#CCCCCC; padding:5px">

<INPUT type="button" value=" 删 除 " style="border:1px solid black "

onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">

</div>

</FORM>

</BODY>

<SCRIPT 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);

}

</SCRIPT>

• ·坚持学asp.net——(五2)
• ·生活感慨（qingyang）
• ·我的内容管理系统(CMS)寻找历程 -- Ma
• ·(iAS 10g)How to use sta
• ·Mambo 4.5.1-RC-2　英文候选版发
• ·如何用正确的方法来写出质量好的软件的75条体会
• ·C#与Excel的交互示例
• ·换一个思路（zz）
• ·有用的国外开源项目网址
• ·Python2.4 新特性尝鲜