javascript操作多选列表框

javascript操作多选列表框使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。将下面的代码存成html文件，运行就可看到效果。<SCRIPTlanguage=javascript>/****************************************************************************************************************文件名：selectListTools.js*文件描述：关于list列表框的一些工具方法*主要方法：*1，moveUp(oSelect,isToTop)－－－－－－－－－－－－向上移动一个list列表框的选中项目，*可以支持多选移动，可以设置是否移动到顶层*2，moveDown(oSelect,isToBottom)－－－－－－－－－－向下移动一个list列表框的选中项目，*可以支持多选移动，可以设置是否移动到底层*3，moveSelected(oSourceSel,oTargetSel)－－－－－－在两个列表框之间转移数据*4，moveAll(oSourceSel,oTargetSel)－－－－－－－－－转移两个列表框之间的全部数据*5，deleteSelectItem(oSelect)－－－－－－－－－－－删除所选的项目*****************************************************************************************************************//***使选中的项目上移**oSelect:源列表框*isToTop:是否移至选择项到顶端，其它依次下移，*true为移动到顶端，false反之，默认为false*/functionmoveUp(oSelect,isToTop){//默认状态不是移动到顶端if(isToTop==null)varisToTop=false;//如果是多选------------------------------------------------------------------if(oSelect.multiple){for(varselIndex=0;selIndex<oSelect.options.length;selIndex++){//如果设置了移动到顶端标志if(isToTop){if(oSelect.options[selIndex].selected){vartransferIndex=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{varselIndex=oSelect.selectedIndex;if(selIndex<=0)return;//如果设置了移动到顶端标志if(isToTop){while(selIndex>0){oSelect.options[selIndex].swapNode(oSelect.options[selIndex-1]);selIndex--;}}//没有设置移动到顶端标志elseoSelect.options[selIndex].swapNode(oSelect.options[selIndex-1]);}}/***使选中的项目下移**oSelect:源列表框*isToTop:是否移至选择项到底端，其它依次上移，*true为移动到底端，false反之，默认为false*/functionmoveDown(oSelect,isToBottom){//默认状态不是移动到顶端if(isToBottom==null)varisToBottom=false;varselLength=oSelect.options.length-1;//如果是多选------------------------------------------------------------------if(oSelect.multiple){for(varselIndex=oSelect.options.length-1;selIndex>=0;selIndex--){//如果设置了移动到顶端标志if(isToBottom){if(oSelect.options[selIndex].selected){vartransferIndex=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{varselIndex=oSelect.selectedIndex;if(selIndex>=selLength-1)return;//如果设置了移动到顶端标志if(isToBottom){while(selIndex<selLength-1){oSelect.options[selIndex].swapNode(oSelect.options[selIndex+1]);selIndex++;}}//没有设置移动到顶端标志elseoSelect.options[selIndex].swapNode(oSelect.options[selIndex+1]);}}/***移动select的部分内容,必须存在value，此函数以value为标准进行移动**oSourceSel:源列表框对象*oTargetSel:目的列表框对象*/functionmoveSelected(oSourceSel,oTargetSel){//建立存储value和text的缓存数组vararrSelValue=newArray();vararrSelText=newArray();//此数组存贮选中的options，以value来对应vararrValueTextRelation=newArray();varindex=0;//用来辅助建立缓存数组//存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系for(vari=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(vari=0;i<arrSelText.length;i++){//增加varoOption=document.createElement(option);oOption.text=arrSelText[i];oOption.value=arrSelValue[i];oTargetSel.add(oOption);//删除源列表框中的对应项oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);}}/***移动select的整块内容**oSourceSel:源列表框对象*oTargetSel:目的列表框对象*/functionmoveAll(oSourceSel,oTargetSel){//建立存储value和text的缓存数组vararrSelValue=newArray();vararrSelText=newArray();//存储所有源列表框数据到缓存数组for(vari=0;i<oSourceSel.options.length;i++){arrSelValue[i]=oSourceSel.options[i].value;arrSelText[i]=oSourceSel.options[i].text;}//将缓存数组的数据增加到目的select中for(vari=0;i<arrSelText.length;i++){varoOption=document.createElement(option);oOption.text=arrSelText[i];oOption.value=arrSelValue[i];oTargetSel.add(oOption);}//清空源列表框数据，完成移动oSourceSel.innerHTML=;}/***删除选定项目**oSelect:源列表框对象*/functiondeleteSelectItem(oSelect){for(vari=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><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312><BODYstyle=font-size:12px><FORMname=form1method=postaction=><SELECTname=leftsize=10id=selectmultiplestyle=width:100px;><OPTIONvalue=aaaaa>aaaaa</OPTION><OPTIONvalue=bbbbb>bbbbb</OPTION><OPTIONvalu