jQuery实现两个列表框的值之间的互换：

最新推荐文章于 2021-05-09 08:42:06 发布

迷彩的博客

最新推荐文章于 2021-05-09 08:42:06 发布

阅读量3.7k

点赞数

分类专栏：大前端技术

本文为博主原创文章，转载请加上原文链接，谢谢！

本文链接：https://blog.csdn.net/sxdtzhaoxinguo/article/details/18841907

版权

大前端技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jQuery实现两个列表框的值之间的互换：

截图如下：

代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>列表框的综合应用</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
	$(function(){
		$("#right").click(function(){	<%--判断用户是否单击的向右按钮--%>
			var $options = $("#select option:selected");	<%--获取用户选择的列表项--%>
			var $remove = $options.remove();	<%--将列表项删除--%>
			$remove.appendTo('#select2');	<%--将删除的列表项追加到select2中--%>
		});
		
		$('#rightAll').click(function(){	<%--判断用户是否单击了全部向右移动按钮--%>
			var $options = $('#select option');	<%--获取全部的列表项--%>
			$options.appendTo('#select2');	<%--将全部的列表项追加到select2中--%>
		});
		
		$("#left").click(function(){
			var $options = $('#select2 option:selected');	<%--判断用户是否单击的向左按钮--%>
			var $remove = $options.remove();	<%--将列表项删除--%>
			$remove.appendTo('#select');	<%--将删除的列表项追加到select中--%>
		});
		
		$('#leftAll').click(function(){
			var $options = $('#select2 option');
			var $remove = $options.remove();
			$remove.appendTo('#select');
		});
		
	});
</script>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="125">
			<div align="center">
				<label>
					<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>
				</label>
			</div>
		</td>
		<td width="51">
			<label>
				<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="left" id="leftAll" value="<<"/><br/>
					<input type="button" name="leftAll" id="left" value="|<"/>
				</div>
			</label>
		</td>
		<td width="125">
			<div align="center">
				<select multiple="multiple" size="6" name="select2" id="select2">
				
				</select>
			</div>
		</td>
	</tr>
</table>
</body>
</html>