<!DOCTYPE html>
<html>
<head>
<title>checkbox练习</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
window.onload = function() {
/*
关于功能实现
1.怎样可以让左边的一项移动到右边?
怎样得到select中的选中项?
select.options;----得到所有的option的数组.
select有一个属性叫selectIndex。得到被选中项的索引.
var option=select.options[select.selectIndex]----得到了被选中的项。
rightSelect.add(option);
*/
//向右移动一个.
document.getElementById("removeRightOnly").onclick = function() {
//得到左边select中选中的项.
var left = document.getElementById("left"); //得到左边的select
var option = left.options[left.selectedIndex]; //得到左边选的项.
document.getElementById("right").add(option);
};
/*
2.怎样将左边的全部移动的右边。
options得到全部，编列所有的，使用rightSelect.add将所有的添加到右边就可以。
*/
document.getElementById("removeRightAll").onclick = function() {
//得到左边的全部
var left = document.getElementById("left");
var ops=left.options; //得到左边全部的option
//遍历每一个option，将其添加到右边.
while(ops.length>0){
document.getElementById("right").add(ops[0]);
}
};
}
</script>
</head>
<body>
<table align='center'>
<tr>
<td><select size="10" id="left">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select></td>
<td><input type="button" value="--->" id="removeRightOnly"><br>
<input type="button" value="===>" id="removeRightAll"><br>
<input type="button" value="<---" id="removeLeftOnly"><br>
<input type="button" value="<===" id="removeLeftAll"><br>
</td>
<td><select size="10" id="right">
<option>选项10</option>
</select></td>
</tr>
</table>
</body>
</html>
