JavaScript下拉列表操作-优快云博客

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练－－下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">
function moveRight()
{
//获取左边的选择框
var oneSelect = document.getElementById("oneSelect");
//获取右边的选择框
var twoSelect = document.getElementById("twoSelect");

var j=0;
//初始化选中项
var selected=new Array();

for(i=0;i<oneSelect.length;i++)
{
if(oneSelect.options[i].selected)
{
var o=oneSelect.options[i].cloneNode(true);
//添加到右边选项框
twoSelect.appendChild(o);
selected[j++]= oneSelect.options[i];
}
}
//从左边选项框删除
for(var i=0; i<j; i++) {
selected[i].removeNode(true);
}
}

function moveLeft()
{
var oneSelect = document.getElementById("twoSelect");
var twoSelect = document.getElementById("oneSelect");

var j=0;
var selected=new Array();

for(i=0;i<oneSelect.length;i++)
{
if(oneSelect.options[i].selected)
{
var o=oneSelect.options[i].cloneNode(true);
twoSelect.appendChild(o);
selected[j++]= oneSelect.options[i];
}
}

for(var i=0; i<j; i++) {
selected[i].removeNode(true);
}
}

</script>

</head>

<body bgcolor="abcdef">
<form id='saveFormId' name="saveFormName" method="post" action="save.html" >

<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="oneSelect">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" onclick="moveRight();">
<br>
<input type="button" id="moveOne" value="<<--" onclick="moveLeft();">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="twoSelect">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>

</form>

<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>

List