使用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>