在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。

<form name="myForm">
<table>
<tr valign="top">
<td>
<select name="leftList" multiple size="6" style="50px;">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
<td>
<!-- 通过事件onclick调用JavaScript的moveList函数 -->
<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=" 50px;">
<option>d</option>
<option>e</option>

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

<script language="JavaScript"> 
// moveList用于对两个多选列表进行选项的移动操作
// from为"需要移动"的列表名称，to为"移动到"列表名称
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 为"需要移动"列表中的当前选项序号
var current = fromList.selectedIndex;
// 如果"需要移动"列表中有选择项，则进行移动操作
while (current>-1) {
// o为"需要移动"列表中当前选择项对象
var o = fromList.options[current];
var t = o.text;
var v = o.value;
// 根据已选项新建一个列表选项
var optionName = new Option(t, v, false, false);
// 将该选项添加到"移动到"列表中
toList.options[toLen]= optionName;
toLen++;
// 将该选项从"需要移动"列表中清除
fromList.options[current]=null;

current = fromList.selectedIndex;
}
}

</script>

程序说明：

//HTML DOM selectedIndex 属性

HTML DOM Select 对象

定义和用法

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

注释：若允许多重选择，则仅会返回第一个被选选项的索引号。

语法

selectObject.selectedIndex=number

HTML DOM options 集合

HTML DOM Select 对象

定义和用法

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

注释：数组中的每个元素对应一个 <option> 标签 - 由 0 起始。

语法

selectObject.options[]

说明

options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：

• 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
• 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
• 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
• 可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。