JS实现列表移动（通过DOM操作select标签）
学习内容：
需求
用 JavaScript 实现 select 标签的移动
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选择列表</title>
<script type="text/javascript">
function moveSelected(src, dest) {
// 获取想要移动元素的 select 标签的所有 option 子标签
var srcOpt = document.getElementById(src).options;
// 获取移动目的地元素的 select 标签
var destOpt = document.getElementById(dest);
for(var i = srcOpt.length - 1; i >= 0; i--) {
if(srcOpt[i].selected === true) {
// 把移动标签作为子节点添加到目标节点
destOpt.appendChild(srcOpt[i]);
}
}
}
function moveAll(src, dest) {
// 获取想要移动元素的 select 标签的所有 option 子标签
var srcOpt = document.getElementById(src).options;
// 获取移动目的地元素的 select 标签
var destOpt = document.getElementById(dest);
// 遍历每一个 option 子标签
// 需要倒叙遍历，不然只会移动一部分标签，因为标签元素会向上移动
for(var i = srcOpt.length - 1; i >= 0; i--) {
// 把移动标签作为子节点添加到目标节点
destOpt.appendChild(srcOpt[i]);
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="select1" style="width:100px;height:200px" size="10" multiple="multiple">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td align="center">
<input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
<input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
<input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
<input type="button" onclick="moveAll('select2','select1')" value="<=="/>
</td>
<td>
<select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>
</td>
</tr>
</table>
</body>
</html>
总结：
仅供参考，欢迎讨论交流。
