<form name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" multiple size="6" style="width:50px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
<td>
<!-- 通過事件onclick調(diào)用JavaScript的moveList函數(shù) -->
<input type="button" name="to" value=" >> " onclick="moveList('leftList','rightList')"><p>
<input type="button" name="backTo" value=" << " onclick="moveList('rightList','leftList')"><p>
</td>
<td>
<select name="rightList" multiple size="6" style="width: 50px;">
<option>d</option>
<option>e</option>

<option>f</option>
</select>
</td>
</tr>
</table>
</form>

?

<script language="JavaScript">?
// moveList用于對(duì)兩個(gè)多選列表進(jìn)行選項(xiàng)的移動(dòng)操作
// from為"需要移動(dòng)"的列表名稱，to為"移動(dòng)到"列表名稱
function moveList(from,to) {?
var fromList = document.myForm.elements[from];
var fromLen = fromList.options.length;

var toList = document.myForm.elements[to];
var toLen = toList.options.length;

// current 為"需要移動(dòng)"列表中的當(dāng)前選項(xiàng)序號(hào)
var current = fromList.selectedIndex;
// 如果"需要移動(dòng)"列表中有選擇項(xiàng)，則進(jìn)行移動(dòng)操作
while (current>-1) {
// o為"需要移動(dòng)"列表中當(dāng)前選擇項(xiàng)對(duì)象
var o = fromList.options[current];
var t = o.text;
var v = o.value;
// 根據(jù)已選項(xiàng)新建一個(gè)列表選項(xiàng)
var optionName = new Option(t, v, false, false);
// 將該選項(xiàng)添加到"移動(dòng)到"列表中
toList.options[toLen]= optionName;
toLen++;
// 將該選項(xiàng)從"需要移動(dòng)"列表中清除
fromList.options[current]=null;

current = fromList.selectedIndex;
}
}

</script>

?

?

程序說明：

//HTML?DOM?selectedIndex? 屬性

HTML?DOM?Select? 對(duì)象

定義和用法

selectedIndex? 屬性可設(shè)置或返回下拉列表中被選選項(xiàng)的索引號(hào)。

注釋：若允許多重選擇，則僅會(huì)返回第一個(gè)被選選項(xiàng)的索引號(hào)。

語法

selectObject.selectedIndex=number

?

HTML DOM options 集合

?

?

      selectObject.options[]
    

?

在窗體中有兩個(gè)多選列表，用戶可以從左側(cè)列表中選擇任意項(xiàng)，添加到右側(cè)列表中。反之亦然。