select转移工具箱(IE,NS,FF) （转）

转自：http://blog.csdn.net/LxcJie/archive/2004/08/31/90276.aspx   刘肖冲

 

在bs系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望对大家有所帮助 :　） 2006.01.18对代码进行升级，使其支持IE，Netscape，Firefox 把下面的内容拷贝到一个htm文件中即可以看到效果.

<script type="text/javascript"></script> 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/LxcJie/archive/2004/08/31/90276.aspx

效果
1，功能说明：实现两个list之间的数据转换，单个select的上下移动，删除。（支持多选操作）

2，函数简介

• 上移：moveUp(oSelect,isToTop)
• 下移：moveDown(oSelect,isToTop)
• 选中转移：moveSelected(oSourceSel,oTargetSel)
• 全部转移：moveAll(oSourceSel,oTargetSel)
• 删除选中：deleteSelectItem(oSelect)

---

aaaaabbbbbccccc dddddeeeeefffffggggghhhhhiiiii

（支持多选移动）

右移：
左移：

 

---

<script type="text/javascript"></script> 本文来自CSDN博客，转载请标明出处： http://blog.csdn.net/LxcJie/archive/2004/08/31/90276.aspx

 

代码：如下：

 

<!-- 欢迎转载,请保留作者及其出处,谢谢 --> <SCRIPT language="javascript"> <!-- /*************************************************************************************************************** * 文 件 名：selectListTools.js * 创建时间：2004.6.23 * 创 建 人：刘肖冲 * 公 司： * 文件描述：关于list列表框的一些工具方法 * 支持IE，Netscape，Firefox浏览器 * 主要方法： * 1， moveUp(oSelect,isToTop) －－－－－－－－－－－－ 向上移动一个list列表框的选中项目， * 可以支持多选移动，可以设置是否移动到顶层 * 2， moveDown(oSelect,isToBottom)－－－－－－－－－－ 向下移动一个list列表框的选中项目， * 可以支持多选移动，可以设置是否移动到底层 * 3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在两个列表框之间转移数据 * 4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 转移两个列表框之间的全部数据 * 5， deleteSelectItem(oSelect) －－－－－－－－－－－ 删除选中数据 * * 修改履历 * Ver 日期 修改人 修改内容 * 1.0 2004.06.23 刘肖冲 Only IE * 1.1 2006.01.18 刘肖冲 增加对FF，NS的支持 * ****************************************************************************************************************/ /** * added by 刘肖冲 2006.1.17 * FF，NS不支持swapNode，自己实现 */ if(window.Node) { Node.prototype.swapNode=function(node) { var nextSibling=this.nextSibling; var parentNode=this.parentNode; node.parentNode.replaceChild(this,node); parentNode.insertBefore(node,nextSibling); } } /** * added by 刘肖冲 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 刘肖冲 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 + 1].swapNode(oSelect.options[transferIndex]); transferIndex ++; } } } //没有设置移动到顶端标志 else { if(oSelect.options[selIndex].selected) { if(selIndex < selLength) { if(!oSelect.options[selIndex + 1].selected) oSelect.options[selIndex + 1].swapNode(oSelect.options[selIndex]); } } } } } //如果是单选-------------------------------------------------------------------- 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 刘肖冲 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"); var oTxt = document.createTextNode(arrSelText[i]); oOption.appendChild(oTxt); oOption.value = arrSelValue[i]; oTargetSel.appendChild(oOption); //删除源列表框中的对应项 oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]); } } /** * added by 刘肖冲 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"); var oTxt = document.createTextNode(arrSelText[i]); oOption.appendChild(oTxt); oOption.value = arrSelValue[i]; oTargetSel.appendChild(oOption); } //清空源列表框数据，完成移动 oSourceSel.innerHTML = ""; } /** * added by 刘肖冲 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"> <link type="text/css" rel="stylesheet" href="/js/css/common.css" mce_href="js/css/common.css"> <BODY style="font-size:12px" mce_style="font-size:12px"> <FORM name="form1" method="post" action=""> <span> <br> 1，功能说明：实现两个list之间的数据转换，单个select的上下移动，删除。（支持多选操作）<br><br> 2，函数简介 <ul> <li>上移：moveUp(oSelect,isToTop)</li> <li>下移：moveDown(oSelect,isToTop)</li> <li>选中转移：moveSelected(oSourceSel,oTargetSel)</li> <li>全部转移：moveAll(oSourceSel,oTargetSel)</li> <li>删除选中：deleteSelectItem(oSelect)</li> </ul> <hr><br> </span> <SELECT id="left" 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 " mce_style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.getElementById('left'),document.getElementById('right'))"> <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.getElementById('right'),document.getElementById('left'))"> <SELECT id="right" 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" mce_style="background-color:#CCCCCC;padding:2px"> <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="上移一行" onClick="moveUp(document.getElementById('right'));moveUp(document.getElementById('left'))"> <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="下移一行" onClick="moveDown(document.getElementById('right'));moveDown(document.getElementById('left'))"> <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="上移到顶" onClick="moveUp(document.getElementById('right'),true);moveUp(document.getElementById('left'),true)"> <INPUT style="border:1px solid black " mce_style="border:1px solid black " type="button" value="下移到底" onClick="moveDown(document.getElementById('right'),true);moveDown(document.getElementById('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 " mce_style="border:1px solid black " onClick="judgeMove()">  </DIV> <br><br> <DIV style="background-color:#CCCCCC; padding:5px" mce_style="background-color:#CCCCCC; padding:5px"> <INPUT type="button" value=" 删 除 " style="border:1px solid black " mce_style="border:1px solid black " onClick="deleteSelectItem(document.getElementById('left'));deleteSelectItem(document.getElementById('right'))"> </div> </FORM> <!----> <p> <hr> <br> <!----> </BODY> <SCRIPT language="javascript"> function judgeMove() { var arrRadio = document.getElementsByName("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.getElementById("right"),document.getElementById("left")); if(valOfRadio == "right") moveAll(document.getElementById("left"),document.getElementById("right")); } </SCRIPT> 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/LxcJie/archive/2004/08/31/90276.aspx