<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>将选中的列表项添加给另一个列表框、将全部的列表项添加给对方</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#right").click(function(){
var $options=$("#select option:selected");
var $remove=$options.remove();
$remove.appendTo("#select2");
});
$("#rightAll").click(function(){
var $options = $("#select option");
$options.appendTo("#select2");
});
$("#left").click(function(){
var $options=$("#select2 option:selected");
var $remove=$options.remove();
$remove.appendTo("#select");
});
$("#leftAll").click(function(){
var $options=$("#select2 option");
var $remove=$options.remove();
$remove.appendTo("#select");
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="125">
<div align="center">
<select multiple="multiple" size="6" name="select" id="select">
<option value="英语听说">英语听说</option>
<option value="声乐">声乐</option>
<option value="美术">美术</option>
<option value="书法">书法</option>
<option value="高数">高数</option>
<option value="儿童文学">儿童文学</option>
</select>
</div>
</td>
<td width="51">
<div align="center">
<input type="button" name="right" id="right" value=">|"/>
<br/>
<input type="button" name="rightAll" id="rightAll" value=">>"/>
<br/>
<input type="button" name="leftAll" id="leftAll" value="<<"/>
<br/>
<input type="button" name="left" id="left" value="|<" />
</div>
</td>
<td width="117">
<div align="center">
<select multiple="multiple" size="6" name="select2" id="select2"></select>
</div>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>将选中的列表项添加给另一个列表框、将全部的列表项添加给对方</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#right").click(function(){
var $options=$("#select option:selected");
var $remove=$options.remove();
$remove.appendTo("#select2");
});
$("#rightAll").click(function(){
var $options = $("#select option");
$options.appendTo("#select2");
});
$("#left").click(function(){
var $options=$("#select2 option:selected");
var $remove=$options.remove();
$remove.appendTo("#select");
});
$("#leftAll").click(function(){
var $options=$("#select2 option");
var $remove=$options.remove();
$remove.appendTo("#select");
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="125">
<div align="center">
<select multiple="multiple" size="6" name="select" id="select">
<option value="英语听说">英语听说</option>
<option value="声乐">声乐</option>
<option value="美术">美术</option>
<option value="书法">书法</option>
<option value="高数">高数</option>
<option value="儿童文学">儿童文学</option>
</select>
</div>
</td>
<td width="51">
<div align="center">
<input type="button" name="right" id="right" value=">|"/>
<br/>
<input type="button" name="rightAll" id="rightAll" value=">>"/>
<br/>
<input type="button" name="leftAll" id="leftAll" value="<<"/>
<br/>
<input type="button" name="left" id="left" value="|<" />
</div>
</td>
<td width="117">
<div align="center">
<select multiple="multiple" size="6" name="select2" id="select2"></select>
</div>
</td>
</tr>
</table>
</body>
</html>