<SCRIPT LANGUAGE="JavaScript">
sortitems = 1;  <!--設(shè)定初始值-->

function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();<!--新建變量-->
no.value = fbox.options[i].value;<!--獲取彈出列表中的序號-->
no.text = fbox.options[i].text;<!--獲取彈出列表的文字-->
tbox.options[tbox.options.length] = no;<!--將彈出的文字和序號寫入接收列表-->
fbox.options[i].value = "";<!--將彈出列表中彈出的項(xiàng)置空-->
fbox.options[i].text = "";<!--將彈出列表中彈出的項(xiàng)的文字置空-->
   }
}
BumpUp(fbox);<!--彈出列表的文字-->
if (sortitems) SortD(tbox);<!--對列表中的文字進(jìn)行排序-->
}


function BumpUp(box)  {
for(var i=0; i<box.options.length; i++) {<!--依次對每一項(xiàng)進(jìn)行處理-->
if(box.options[i].value == "")  {<!--如果某一項(xiàng)為空-->
for(var j=i; j<box.options.length-1; j++)  {<!--將該項(xiàng)后邊的每一項(xiàng)均前移-->
box.options[j].value = box.options[j+1].value;<!--移動value值-->
box.options[j].text = box.options[j+1].text;<!--移動文字-->
}
var ln = i;break;<!--記錄空值的項(xiàng)-->
   }
}
if(ln < box.options.length)  {<!--如果空值的項(xiàng)小于總長度-->
box.options.length -= 1;<!--總長度減1-->
BumpUp(box);<!--繼續(xù)調(diào)用彈出-->
   }
}


function SortD(box)  {
var temp_opts = new Array();                   <!--創(chuàng)建一個新的數(shù)組-->
var temp = new Object();                       <!--創(chuàng)建一個新的object對象-->
for(var i=0; i<box.options.length; i++)  {  <!--對列表中的項(xiàng)依次進(jìn)行處理-->   
temp_opts[i] = box.options[i];<!--將列表中的每一項(xiàng)存在temp_opts中-->
}
for(var x=0; x<temp_opts.length-1; x++)  {
for(var y=(x+1); y<temp_opts.length; y++)  {
if(temp_opts[x].text > temp_opts[y].text)  {
temp = temp_opts[x].text;<!--獲得第x項(xiàng)的文字-->
temp_opts[x].text = temp_opts[y].text;<!--將第y項(xiàng)的文字賦值給第x項(xiàng)的文字-->
temp_opts[y].text = temp;<!--同時temp中文字賦值給第y項(xiàng)-->
temp = temp_opts[x].value;<!--再將第x項(xiàng)中的value存放再temp中-->
temp_opts[x].value = temp_opts[y].value;<!--再將第y項(xiàng)中的value付給第x項(xiàng)-->
temp_opts[y].value = temp;<!--第y項(xiàng)value的值換成temp的值-->
      }
   }
}
for(var i=0; i<box.options.length; i++)  {
box.options[i].value = temp_opts[i].value;<!--將value值賦給當(dāng)前列表中-->
box.options[i].text = temp_opts[i].text;<!--將文字賦給當(dāng)前列表中-->
   }
}

</script>

<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="5" name="list1">
<option value="l1">A</option>
<option value="l2">B </option>
<option value="l3">C</option>
<option value="l4">D</option>
</select></td>
<td>
<input type="button" value=" ==>> " onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value=" <<== " onclick="move(this.form.list2,this.form.list1)" name="B2">
</td>
<td><select multiple size="5" name="list2">
<option value="r1">E</option>
<option value="r2">F </option>
<option value="r3">G</option>
<option value="r4">H</option>
</select></td>
</tr>
</table>
</form>

<!--本例程實(shí)現(xiàn)了兩個列表內(nèi)容相互交換的功能-->
<!--列表對象的交互功能的實(shí)現(xiàn)-->
<!--鼠標(biāo)事件的響應(yīng)函數(shù)的編寫-->
<!--函數(shù)之間的調(diào)用關(guān)系-->