JQuery兑现Select数据的相互转换 _Web前端

JQuery实现Select数据的相互转换

完整源码下载地址：http://download.csdn.net/detail/software0116/4610452

js代码：

$(function() {
		//全部移到右边
		$('#alladd').click(function() {
			$('#leftselect option').remove().appendTo('#rightselect');
		});
		//全部移动左边
		$('#allremove').click(function() {
			$('#rightselect option').remove().appendTo('#leftselect');
		});
		//移到右边
		$('#add').click(function() {
			$('#leftselect option:selected').remove().appendTo('#rightselect');
		});
		//移到左边
		$('#remove').click(function() {
			$('#rightselect option:selected').remove().appendTo('#leftselect');
		});
		//双击选项
		$('#leftselect').dblclick(function() {
			$("option:selected", this).remove().appendTo('#rightselect');
		});
		//双击选项
		$('#rightselect').dblclick(function() {
			$("option:selected", this).remove().appendTo('#leftselect');
		});
		//左边向上按钮
		$('#left_up')
				.click(
						function() {
							var index = $('#leftselect option').index(
									$('#leftselect option:selected:first'));
							var $recent = $('#leftselect option:eq(' + (index - 1) + ')');
							if (index > 0) {
								var $options = $('#leftselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.before($options)
								}, 10);
							}
						});
		//左边向下按钮
		$('#left_down')
				.click(
						function() {
							var index = $('#leftselect option').index(
									$('#leftselect option:selected:last'));
							var len = $('#leftselect option').length - 1;
							var $recent = $('#leftselect option:eq(' + (index + 1) + ')');
							if (index < len) {
								var $options = $('#leftselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.after($options)
								}, 10);
							}
						});
		//右边向上按钮
		$('#right_up')
				.click(
						function() {
							var index = $('#rightselect option').index(
									$('#rightselect option:selected:first'));
							var $recent = $('#rightselect option:eq(' + (index - 1) + ')');
							if (index > 0) {
								var $options = $('#rightselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.before($options)
								}, 10);
							}
						});
		//右边向下按钮
		$('#right_down')
				.click(
						function() {
							var index = $('#rightselect option').index(
									$('#rightselect option:selected:last'));
							var len = $('#rightselect option').length - 1;
							var $recent = $('#rightselect option:eq(' + (index + 1) + ')');
							if (index < len) {
								var $options = $('#rightselect option:selected')
										.remove();
								setTimeout(function() {
									$recent.after($options)
								}, 10);
							}
						});
	});

HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Select.html</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">
		<link rel="stylesheet" href="css.css" type="text/css"></link>
		<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="selectOption.js"></script>
	</head>

	<body>
		<table align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					可选择表项
				</td>
				<td></td>
				<td>
					已选择表项
				</td>
			</tr>
			<tr>
				<td>
					<select multiple="multiple" id="leftselect" name="leftselect"
						style="width: 100px; height: 160px;">
						<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>
					</select>

				</td>
				<td>
					<input type="button" class="button" id="add" value="选中向右">
					<br>
					<input type="button" class="button" id="remove" value="选中向左">
					<br>
					<input type="button" class="button" id="alladd" value="全部向右">
					<br>
					<input type="button" class="button" id="allremove" value="全部向左">
				</td>
				<td>
					<select multiple="multiple" id="rightselect" name="rightselect"
						style="width: 100px; height: 160px;">
					</select>
				</td>
			</tr>
			<tr>
				<td align="center">
					<input id="left_up" class="button" type="button" value="向上" />
					   
					<input id="left_down" class="button" type="button" value="向下" />
				</td>
				<td></td>
				<td align="center">
					<input id="right_up" class="button" type="button" value="向上" />
					   
					<input id="right_down" class="button" type="button" value="向下" />
				</td>
			</tr>
		</table>

	</body>
</html>