javascript操作多選列表框.doc

1、javascript操作多選列表框使用 javascript操作多選列表框，實現(xiàn)動態(tài)增加刪除，左右移動，上下排序移動等功能。將下面的代碼存成html 文件，運行就可看到效果。<SCRIPT language=javascript>/* 文 件 名： selectListTools.js* 文件描述：關(guān)于 list 列表框的一些工具方法* 主要方法：*1，moveUp(oSelect,isToTop)向上移動一個list列表框的選中項目，*可以支持多選移動，可以設置是否移動到頂層*2，moveDown(oSelect,isToBottom)向下移動一個list列表框的選中項目，*可以

2、支持多選移動，可以設置是否移動到底層*3， moveSelected(oSourceSel,oTargetSel)在兩個列表框之間轉(zhuǎn)移數(shù)據(jù)*4，moveAll(oSourceSel,oTargetSel)轉(zhuǎn)移兩個列表框之間的全部數(shù)據(jù)*5， deleteSelectItem(oSelect)刪除所選的項目*/* 使選中的項目上移* oSelect: 源列表框* isToTop: 是否移至選擇項到頂端，其它依次下移，* true 為移動到頂端， false 反之，默認為 false */function moveUp(oSelect,isToTop)/默認狀態(tài)不是移動到頂端if(isToTop =

3、 null)var isToTop = false;/如果是多選-if(oSelect.multiple)for(var selIndex=0;selIndex<oSelect.options.length; selIndex+)/如果設置了移動到頂端標志if(isToTop)if(oSelect.optionsselIndex.selected)var transferIndex = selIndex;while(transferIndex > 0&& !oSelect.optionstransferIndex - 1.selected)oSelect.optio

4、nstransferIndex.swapNode(oSelect.options transferIndex - 1);transferIndex -;/沒有設置移動到頂端標志elseif(oSelect.optionsselIndex.selected)if(selIndex > 0)if(!oSelect.optionsselIndex -1.selected)oSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex - 1);/如果是單選-elsevar selIndex = oSelect.selectedIndex;if

5、(selIndex <= 0)return;/如果設置了移動到頂端標志if(isToTop)while(selIndex > 0)oSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex - 1);selIndex -;/沒有設置移動到頂端標志elseoSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex - 1);/* 使選中的項目下移* oSelect: 源列表框* isToTop: 是否移至選擇項到底端，其它依次上移，*true 為移動到底端，false 反之

6、，默認為false*/function moveDown(oSelect,isToBottom)/默認狀態(tài)不是移動到頂端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.optionsselIndex.s

7、elected)var transferIndex = selIndex;while(transferIndex < selLength&& !oSelect.optionstransferIndex + 1.selected)oSelect.optionstransferIndex.swapNode(oSelect.options transferIndex + 1);transferIndex +;/沒有設置移動到頂端標志elseif(oSelect.optionsselIndex.selected)if(selIndex < selLength)if(!oSe

8、lect.optionsselIndex +1.selected)oSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex + 1);/如果是單選-elsevar selIndex = oSelect.selectedIndex;if(selIndex >= selLength - 1)return;/如果設置了移動到頂端標志if(isToBottom)while(selIndex < selLength - 1)oSelect.optionsselIndex.swapNode(oSelect.optionsselIndex

9、 + 1);selIndex +;/沒有設置移動到頂端標志elseoSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex + 1);/* 移動 select 的部分內(nèi)容 ,必須存在 value ，此函數(shù)以 value為標準進行移動* oSourceSel: 源列表框?qū)ο? oTargetSel: 目的列表框?qū)ο?/function moveSelected(oSourceSel,oTargetSel)/建立存儲 value 和 text 的緩存數(shù)組var arrSelValue = new Array();var arrSelText

10、 = new Array();/此數(shù)組存貯選中的 options ，以 value 來對應 var arrValueTextRelation = new Array();var index = 0;/用來輔助建立緩存數(shù)組/存儲源列表框中所有的數(shù)據(jù)到緩存中，并建立value和選中 option 的對應關(guān)系for(var i=0; i<oSourceSel.options.length; i+)if(oSourceSel.optionsi.selected)/存儲arrSelValueindex =oSourceSel.optionsi.value;arrSelTextindex =oSou

11、rceSel.optionsi.text;/建立 value 和選中 option 的對應關(guān)系 arrValueTextRelationarrSelValueindex =oSourceSel.optionsi;index +;/增加緩存的數(shù)據(jù)到目的列表框中，并刪除源列表框中的對應項for(var i=0; i<arrSelText.length; i+)/增加var oOption =document.createElement(option);oOption.text = arrSelTexti;oOption.value = arrSelValuei;oTargetSel.add(

12、oOption);/刪除源列表框中的對應項oSourceSel.removeChild(arrValueTextRelationarrSelValuei);/* 移動 select 的整塊內(nèi)容* oSourceSel: 源列表框?qū)ο? oTargetSel: 目的列表框?qū)ο?/function moveAll(oSourceSel,oTargetSel)/建立存儲 value 和 text 的緩存數(shù)組var arrSelValue = new Array();var arrSelText = new Array();/存儲所有源列表框數(shù)據(jù)到緩存數(shù)組for(var i=0; i<oSour

13、ceSel.options.length; i+)arrSelValuei = oSourceSel.optionsi.value; arrSelTexti = oSourceSel.optionsi.text;/將緩存數(shù)組的數(shù)據(jù)增加到目的 select 中 for(var i=0; i<arrSelText.length; i+) var oOption =document.createElement(option);oOption.text = arrSelTexti;oOption.value = arrSelValuei;oTargetSel.add(oOption);/清空源列

14、表框數(shù)據(jù)，完成移動oSourceSel.innerHTML = ;/* 刪除選定項目* oSelect:源列表框?qū)ο?/function deleteSelectItem(oSelect)for(var i=0; i<oSelect.options.length; i+)if(i>=0 &&i<=oSelect.options.length-1 &&oSelect.optionsi.selected)oSelect.optionsi = null;i -;/js 文件完畢</SCRIPT><meta http-equiv=Co

15、ntent-Type content=text/html; charset=gb2312><BODY style=font-size:12px><FORM name=form1 method=post action=> <SELECT name=left size=10 id=select multiplestyle=width:100px; ><OPTIONvalue=aaaaa>aaaaa</OPTION><OPTIONvalue=bbbbb>bbbbb</OPTION><OPTION valu

16、e=ccccc>ccccc</OPTION> </SELECT><INPUT style=border:1px solid black type=buttonvalue=>>>onClick=moveSelected(document.all.left,document.all.right)><INPUT style=border:1px solid black type=buttonvalue=<<<onClick=moveSelected(document.all.right,document.all.le

17、ft)><SELECT name=right size=10 id=select multiple style=width:100px; ><OPTIONvalue=ddddd>ddddd</OPTION><OPTIONvalue=eeeee>eeeee</OPTION> <OPTION value=fffff>fffff</OPTION> <OPTIONvalue=ggggg>ggggg</OPTION><OPTIONvalue=hhhhh>hhhhh</OPT

18、ION> <OPTION value=iiiii>iiiii</OPTION></SELECT><br><br><br><br><DIVstyle=background-color:#CCCCCC;padding:2px><INPUT style=border:1px solid black type=buttonvalue= 上移一格 onClick=moveUp(document.all.right);moveUp(document.all.left)><INPUT st

19、yle=border:1px solid black type=buttonvalue= 下移一格 onClick=moveDown(document.all.right);moveDown(document.all.left)><INPUT style=border:1px solid black type=buttonvalue= 上移到頂 onClick=moveUp(document.all.right,true);moveUp(document.all.left,true)><INPUT style=border:1px solid black type=bu

20、ttonvalue= 下移到頂 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=rightchecked> <br>左移： <INPUT type=radio name=ifAllvalue=left><br><br><INPUT type=button value