jQuery中实现表框的左右选项选择移动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.box
{
border: 1px solid #aaccff;
padding: 10px;
margin: 10px;
}
</style>
<script src="Script/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#Button1").click(function () {
$("#Select1 option:selected").clone().appendTo("#Select2");
$("#Select1 option:selected").remove();
})
$("#Button2").click(function () {
$("#Select1 option").clone().appendTo("#Select2");
$("#Select1 option").hide();
})
$("#Button3").click(function () {
$("#Select2 option:selected").clone().appendTo("#Select1");
$("#Select2 option:selected").remove();
})
$("#Button4").click(function () {
$("#Select2 option").clone().appendTo("#Select1");
$("#Select2 option").hide();
})
})
</script>
</head>
<body>
<div class="box">
<dl>
<dt>作业要求：</dt>
<dd>
<ol>
<li>点击中间按钮，实现左右列表框中元素的左右移动</li>
</ol>
</dd>
</dl>
</div>
<div class="box">
<table style="width: 600px;">
<tr>
<td style="width: 250px;">
<select id="Select1" name="D1" size="4" style="height: 200px; width: 80px;" multiple="multiple">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
</select>
</td>
<td style="width: 100px;">
<input id="Button1" type="button" value=">" /><br />
<input id="Button2" type="button" value=">>" /><br />
<input id="Button3" type="button" value="<" /><br />
<input id="Button4" type="button" value="<<" />
</td>
<td style="width: 250px;">
<select id="Select2" name="D2" size="4" style="height: 200px; width: 80px;" multiple="multiple">
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
