《javascript操作多选列表框》由会员分享，可在线阅读，更多相关《javascript操作多选列表框（17页珍藏版）》请在金锄头文库上搜索。
1、javascript 操作多选列表框使用 javascript 操作多选列表框，实现动态增加删除， 左右移动，上下排序移动等功能。 将下面的代码存成 html 文件，运行就可看到效果。<SCRIPT language=javascript>/* * 文 件 名： selectListTools.js* 文件描述：关于 list 列表框的一些工具方法* 主要方法：* 1 ， moveUp(oSelect,isToTop) 向上移动一个 list 列表框的选中项目，*可以支持多选移动，可以设置是否移动到顶层* 2 ， moveDown(oSelect,isToBottom) 向下移动一
2、个 list 列表框的选中项目，*可以支持多选移动，可以设置是否移动到底层* 3 ， moveSelected(oSourceSel,oTargetSel) 在两个列表框之间转移数据*4 ， moveAll(oSourceSel,oTargetSel) 转移两个列表框之间的全部数据*5 ， deleteSelectItem(oSelect) 删除所选的项目*/*使选中的项目上移* oSelect:源列表框* isToTop:是否移至选择项到顶端，其它依次下移，*true 为移动到顶端， false 反之，默认为 false*/function moveUp(oSelect,isToTop) /
3、默认状态不是移动到顶端 if(isToTop = 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 -
4、1.selected)oSelect.optionstransferIndex.swapNode(oSelect.optionstransferIndex - 1);transferIndex -;/没有设置移动到顶端标志elseif(oSelect.optionsselIndex.selected)if(selIndex > 0)if(!oSelect.optionsselIndex -1.selected) oSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex - 1);/如果是单选 elsevar selIndex =
5、oSelect.selectedIndex;if(selIndex <= 0)return;/如果设置了移动到顶端标志if(isToTop)while(selIndex > 0)oSelect.optionsselIndex.swapNode(oSelect.optionsselIndex - 1);selIndex -;/没有设置移动到顶端标志elseoSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex - 1);使选中的项目下移* oSelect: 源列表框* isToTop: 是否移至选择项到底端，其它依次上移，f
6、alse* true 为移动到底端， 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(
7、oSelect.optionsselIndex.selected)var transferIndex = selIndex; while(transferIndex < selLength && !oSelect.optionstransferIndex + 1.selected)oSelect.optionstransferIndex.swapNode(oSelect.options transferIndex + 1);transferIndex +;/没有设置移动到顶端标志elseif(oSelect.optionsselIndex.selected)if(selI
8、ndex < selLength) if(!oSelect.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
9、.swapNode(oSelect.optionsselIndex + 1);selIndex +;/没有设置移动到顶端标志 elseoSelect.optionsselIndex.swapNode(oSelect.optionsselIn dex + 1);/* 移动 select 的部分内容 , 必须存在 value ，此函数以 value 为标准进行移动* oSourceSel: 源列表框对象* oTargetSel: 目的列表框对象*/function moveSelected(oSourceSel,oTargetSel) /建立存储 value 和 text 的缓存数组var arr
10、SelValue = 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.optionsi.selected)/存储arrSelValueindex =oSourceSe
11、l.optionsi.value;arrSelTextindex =oSourceSel.optionsi.text;/建立 value 和选中 option 的对应关系 arrValueTextRelationarrSelValueindex oSourceSel.optionsi;index +;/增加缓存的数据到目的列表框中，并删除源列表框中 的对应项for(var i=0; i<arrSelText.length; i+)/增加var oOption =document.createElement(option);oOption.text = arrSelTexti;oOptio
12、n.value = arrSelValuei; oTargetSel.add(oOption);/删除源列表框中的对应项oSourceSel.removeChild(arrValueTextRelationarrSelValu ei);移动 select 的整块内容* oSourceSel: 源列表框对象* oTargetSel: 目的列表框对象*/function moveAll(oSourceSel,oTargetSel)/建立存储 value 和 text 的缓存数组 var arrSelValue = new Array();var arrSelText = new Array();/
13、存储所有源列表框数据到缓存数组for(var i=0; i<oSourceSel.options.length; i+) arrSelValuei = oSourceSel.optionsi.value; arrSelTexti = oSourceSel.optionsi.text;/将缓存数组的数据增加到目的 select 中 for(var i=0; i<arrSelText.length; i+) var oOption = document.createElement(option);oOption.text = arrSelTexti;oOption.value = arrSelValuei; oTargetSel.add(oOption);/清空源列表框数据，完成移动 oSourceSel.innerHTML = ;* 删除选定项目* oSelect: 源列表框对象*/function deleteSelectItem(oSelect)for(var i=0; i<oSelect.options.length; i+)if(i>=0 &&i<=oSelect.op
