javascript操作多选列表框.docx
《javascript操作多选列表框.docx》由会员分享，可在线阅读，更多相关《javascript操作多选列表框.docx（11页珍藏版）》请在冰豆网上搜索。
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--;
}
}
//没有设置移动到顶端标志
else
oSelect.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++;
}
}
//没有设置移动到顶端标志
else
oSelect.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-Type"content="text/html;charset=gb2312">
<BODYstyle="font-size:
12px">
<FORMname="form1"method="post"action="">
<SELECTname="left"size="10"id="select"multiplestyle="width:
100px;">
<OPTIONvalue="aaaaa">aaaaa</OPTION>
<OPTIONvalue="bbbbb">bbbbb</OPTION>
<OPTIONvalue="ccccc">ccccc</OPTION>
</SELECT>
<INPUTstyle="border:
1pxsolidblack"type="button"value=">>>"onClick="moveSelected（document.all.left,document.all.right）">
<INPUTstyle="border:
1pxsolidblack"type="button"value="<<<"onClick="moveSelected（document.all.right,document.all.left）">
<SELECTname="right"size="10"id="select"multiplestyle="width:
100px;">
<OPTIONvalue="ddddd">ddddd</OPTION>
<OPTIONvalue="eeeee">eeeee</OPTION>
<OPTIONvalue="fffff">fffff</OPTION>
<OPTIONvalue="ggggg">ggggg</OPTION>
<OPTIONvalue="hhhhh">hhhhh</OPTION>
<OPTIONvalue="iiiii">iiiii</OPTION>
</SELECT>
<br><br><br><br>
<DIVstyle="background-color:
#CCCCCC;padding:
2px">
<INPUTstyle="border:
1pxsolidblack"type="button"value="上移一格"onClick="moveUp（document.all.right）;moveUp（document.all.left）">
<INPUTstyle="border:
1pxsolidblack"type="button"value="下移一格"onClick="moveDown（document.all.right）;moveDown（document.all.left）">
<INPUTstyle="border:
1pxsolidblack"type="button"value="上移到顶"
onClick="moveUp（document.all.right,true）;moveUp（document.all.left,true）">
<INPUTstyle="border:
1pxsolidblack"type="button"value="下移到顶"
onClick="moveDown（document.all.right,true）;moveDown（document.all.left,true）;">（支持多选移动）
</DIV>
<BR><BR>
<DIVstyle="background-color:
#CCCCCC;padding:
5px;width:
100%;position:
relative">
右移：
<INPUTtype="radio"name="ifAll"value="right"checked><br>
左移：
<INPUTtype="radio"name="ifAll"value="left"><br><br>
<INPUTtype="button"value="移动全部"style="border:
1pxsolidblack"onClick="judgeMove（）">
</DIV>
<br><br>
<DIVstyle="background-color:
#CCCCCC;padding:
5px">
<INPUTtype="button"value="删除"style="border:
1pxsolidblack"
onClick="deleteSelectItem（document.all.left）;deleteSelectItem（document.all.right）">
</div>
</FORM>
</BODY>
<SCRIPTlanguage="javascript">
functionjudgeMove（）
{
vararrRadio=document.all.ifAll;
varvalOfRadio;
for（vari=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>
升级会员 