使用javascript操作多選列表框，實(shí)現(xiàn)動(dòng)態(tài)增加刪除，左右移動(dòng)，上下排序移動(dòng)等功能。
將下面的代碼存成html文件，運(yùn)行就可看到效果。
<SCRIPT language="javascript">
/***************************************************************************************************************
* 文 件 名：selectListTools.js
* 文件描述：關(guān)于list列表框的一些工具方法
* 主要方法：
* 1， moveUp(oSelect,isToTop) －－－－－－－－－－－－ 向上移動(dòng)一個(gè)list列表框的選中項(xiàng)目，
* 可以支持多選移動(dòng)，可以設(shè)置是否移動(dòng)到頂層
* 2， moveDown(oSelect,isToBottom)－－－－－－－－－－ 向下移動(dòng)一個(gè)list列表框的選中項(xiàng)目，
* 可以支持多選移動(dòng)，可以設(shè)置是否移動(dòng)到底層
* 3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在兩個(gè)列表框之間轉(zhuǎn)移數(shù)據(jù)
* 4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 轉(zhuǎn)移兩個(gè)列表框之間的全部數(shù)據(jù)
* 5， deleteSelectItem(oSelect) －－－－－－－－－－－ 刪除所選的項(xiàng)目
*
****************************************************************************************************************/
/**
* 使選中的項(xiàng)目上移
*
* oSelect: 源列表框
* isToTop: 是否移至選擇項(xiàng)到頂端，其它依次下移，
* true為移動(dòng)到頂端，false反之，默認(rèn)為false
*/
function moveUp(oSelect,isToTop)
{
//默認(rèn)狀態(tài)不是移動(dòng)到頂端
if(isToTop == null)
var isToTop = false;
//如果是多選------------------------------------------------------------------
if(oSelect.multiple)
{
for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
{
//如果設(shè)置了移動(dòng)到頂端標(biāo)志
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 --;
}
}
}
//沒(méi)有設(shè)置移動(dòng)到頂端標(biāo)志
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;
//如果設(shè)置了移動(dòng)到頂端標(biāo)志
if(isToTop)
{
while(selIndex > 0)
{
oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
selIndex --;
}
}
//沒(méi)有設(shè)置移動(dòng)到頂端標(biāo)志
else
oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
}
}
/**
* 使選中的項(xiàng)目下移
*
* oSelect: 源列表框
* isToTop: 是否移至選擇項(xiàng)到底端，其它依次上移，
* true為移動(dòng)到底端，false反之，默認(rèn)為false
*/
function moveDown(oSelect,isToBottom)
{
//默認(rèn)狀態(tài)不是移動(dòng)到頂端
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--)
{
//如果設(shè)置了移動(dòng)到頂端標(biāo)志
if(isToBottom)
{
if(oSelect.options[selIndex].selected)
{
var transferIndex = selIndex;
while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
{
oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);
transferIndex ++;
}
}
}
//沒(méi)有設(shè)置移動(dòng)到頂端標(biāo)志
else
{
if(oSelect.options[selIndex].selected)
{
if(selIndex < selLength)
{
if(!oSelect.options[selIndex + 1].selected)
oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
}
}
}
}
}
//如果是單選--------------------------------------------------------------------
else
{
var selIndex = oSelect.selectedIndex;
if(selIndex >= selLength - 1)
return;
//如果設(shè)置了移動(dòng)到頂端標(biāo)志
if(isToBottom)
{
while(selIndex < selLength - 1)
{
oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
selIndex ++;
}
}
//沒(méi)有設(shè)置移動(dòng)到頂端標(biāo)志
else
oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
}
}
/**
* 移動(dòng)select的部分內(nèi)容,必須存在value，此函數(shù)以value為標(biāo)準(zhǔn)進(jìn)行移動(dòng)
*
* oSourceSel: 源列表框?qū)ο?
* oTargetSel: 目的列表框?qū)ο?br> */
function moveSelected(oSourceSel,oTargetSel)
{
//建立存儲(chǔ)value和text的緩存數(shù)組
var arrSelValue = new Array();
var arrSelText = new Array();
//此數(shù)組存貯選中的options，以value來(lái)對(duì)應(yīng)
var arrValueTextRelation = new Array();
var index = 0;//用來(lái)輔助建立緩存數(shù)組
//存儲(chǔ)源列表框中所有的數(shù)據(jù)到緩存中，并建立value和選中option的對(duì)應(yīng)關(guān)系
for(var i=0; i<oSourceSel.options.length; i++)
{
if(oSourceSel.options[i].selected)
{
//存儲(chǔ)
arrSelValue[index] = oSourceSel.options[i].value;
arrSelText[index] = oSourceSel.options[i].text;
//建立value和選中option的對(duì)應(yīng)關(guān)系
arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
index ++;
}
}
//增加緩存的數(shù)據(jù)到目的列表框中，并刪除源列表框中的對(duì)應(yīng)項(xiàng)
for(var i=0; i<arrSelText.length; i++)
{
//增加
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
//刪除源列表框中的對(duì)應(yīng)項(xiàng)
oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
}
/**
* 移動(dòng)select的整塊內(nèi)容
*
* oSourceSel: 源列表框?qū)ο?
* oTargetSel: 目的列表框?qū)ο?br> */
function moveAll(oSourceSel,oTargetSel)
{
//建立存儲(chǔ)value和text的緩存數(shù)組
var arrSelValue = new Array();
var arrSelText = new Array();
//存儲(chǔ)所有源列表框數(shù)據(jù)到緩存數(shù)組
for(var i=0; i<oSourceSel.options.length; i++)
{
arrSelValue[i] = oSourceSel.options[i].value;
arrSelText[i] = oSourceSel.options[i].text;
}
//將緩存數(shù)組的數(shù)據(jù)增加到目的select中
for(var i=0; i<arrSelText.length; i++)
{
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
}
//清空源列表框數(shù)據(jù)，完成移動(dòng)
oSourceSel.innerHTML = "";
}
/**
* 刪除選定項(xiàng)目
*
* oSelect: 源列表框?qū)ο?
*/
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">
<BODY style="font-size:12px">
<FORM name="form1" method="post" action="">
<SELECT 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 " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">
<INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">
<SELECT 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">
<INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">
<INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">
<INPUT style="border:1px solid black " type="button" value="上移到頂"
onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">
<INPUT style="border:1px solid black " type="button" value="下移到頂"
onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);"> （支持多選移動(dòng)）
</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="移動(dòng)全部" style="border:1px solid black " onClick="judgeMove()">
</DIV>
<br><br>
<DIV style="background-color:#CCCCCC; padding:5px">
<INPUT type="button" value=" 刪 除 " style="border:1px solid black "
onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">
</div>
</FORM>
</BODY>
<SCRIPT language="javascript">
function judgeMove()
{
var arrRadio = document.all.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.all.right,document.all.left);
if(valOfRadio == "right")
moveAll(document.all.left,document.all.right);
}
</SCRIPT>
