`
sxdtzhaoxinguo
  • 浏览: 227164 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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>


分享到:
评论

相关推荐

    jquery select 选中值设置左右select选择互换

    本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计,尤其是在需要双向联动或者数据交换的场景下,是一个实用的功能。 首先,我们要了解HTML中的`&lt;select&gt;`元素。它是创建下拉...

    JQuery实现select互换数据和上下移动

    为了提供即时反馈,可能需要在每次移动操作后更新两个列表的显示。这可以通过重新渲染列表或者直接更新DOM元素的属性来实现。 6. **异步数据加载**: 如果选项是从服务器动态加载的,可以使用jQuery的Ajax功能,...

    jQuery实现两个select控件的互移操作

    而在实际应用中,有时候需要实现两个select控件之间选项的动态移动,即用户可以将一个控件中的选项移动到另一个控件中,或者反之。这种功能通过纯JavaScript实现较为繁琐,而借助jQuery库则可以大大简化代码,提升...

    使用jQuery实现两个div中按钮互换位置的实例代码

    在本文中,我们将深入探讨如何使用jQuery来实现两个div中按钮的互换位置功能。这个实例对于理解jQuery的DOM操作和事件处理具有很好的实践意义。首先,我们需要了解jQuery库的基本用法,它是一个轻量级的JavaScript库...

    jQuery双列表左右互选

    这个功能允许用户在两个列表之间选择、添加或删除项,以实现数据的筛选和分配。在网页设计和开发中,这种效果可以用于诸如角色分配、权限设置等场景。 首先,我们来看`jQuery`库。jQuery是一个高效、易用的...

    中级程序员必备面试题.txt

    ### 中级程序员必备面试题解析 ...对于两个数相加超过`long`类型最大值的情况,可以使用`BigInteger`类进行大数运算。 以上内容涵盖了中级程序员面试中常见的知识点和技术细节,旨在帮助准备面试的开发者全面理解...

    java开源包3

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包4

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    JAVA上百实例源码以及开源项目源代码

    Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用...

    java开源包1

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包11

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包2

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包6

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包5

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包10

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包8

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包7

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包9

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    java开源包101

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

    Java资源包01

    GiftedMotion是一个很小的,免费而且易于使用图像互换格式动画是能够设计一个有趣的动画了一系列的数字图像。使用简便和直截了当,用户只需要加载的图片和调整帧您想要的,如位置,时间显示和处理方法前帧。 Java的...

Global site tag (gtag.js) - Google Analytics