使用javascript操作多選列表框，實現動態增加刪除，左右移動，上下排序移動等功能。
將下面的代碼存成html文件，運行就可看到效果。

?<SCRIPT language="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
? */
?function moveUp(oSelect,isToTop)
?{
???? //默認狀態不是移動到頂端
???? if(isToTop == null)
???????? var isToTop = false;
????????
???? //如果是多選------------------------------------------------------------------
???? if(oSelect.multiple)
???? {
???????? for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
???????? {
???????????? //如果設置了移動到頂端標志
???????????? 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 --;
???????????????????? }
???????????????? }
???????????? }
???????????? //沒有設置移動到頂端標志
???????????? 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;
???????? //如果設置了移動到頂端標志
???????? 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
? */
?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(oSelect.options[selIndex].selected)
???????????????? {
???????????????????? var transferIndex = 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
???? {
???????? var selIndex = 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: 目的列表框對象
? */
?function moveSelected(oSourceSel,oTargetSel)
?{
???? //建立存儲value和text的緩存數組
???? var arrSelValue = 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.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(var i=0; i<arrSelText.length; i++)?
???? {
???????? //增加
???????? var oOption = document.createElement("option");
???????? oOption.text = arrSelText[i];
???????? oOption.value = arrSelValue[i];
???????? oTargetSel.add(oOption);
???????? //刪除源列表框中的對應項
???????? oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
???? }
?}

/**
? * 移動select的整塊內容
? *
? * oSourceSel: 源列表框對象
? * oTargetSel: 目的列表框對象
? */
?function moveAll(oSourceSel,oTargetSel)
?{
???? //建立存儲value和text的緩存數組
???? var arrSelValue = new Array();
???? var arrSelText = new Array();
????
???? //存儲所有源列表框數據到緩存數組
???? for(var i=0; i<oSourceSel.options.length; i++)
???? {
???????? arrSelValue[i] = oSourceSel.options[i].value;
???????? arrSelText[i] = oSourceSel.options[i].text;
???? }
????
???? //將緩存數組的數據增加到目的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);
???? }
????
???? //清空源列表框數據，完成移動
???? oSourceSel.innerHTML = "";
?}

/**
? * 刪除選定項目
? *
? * oSelect: 源列表框對象
? */
?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);">? （支持多選移動）
?? </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="移動全部" 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>