如何用jQuery实现两个下拉框的值的相互交换

最新推荐文章于 2020-12-21 01:42:17 发布

KingBack（王者归来）

最新推荐文章于 2020-12-21 01:42:17 发布

阅读量1.6k

点赞数 3

本文链接：https://blog.csdn.net/My_Deng_Peng/article/details/80760632

版权

jQuery它是一个轻量级的javascript类库，它具有自己独特的优点：

1.总是面向集合。

2.多行操作集于一行。

这些都是废话，接下来看看怎么用jQuery来实现两个下拉框的值的相互交换吧？

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>//这是一个jQuery库，要实现效果必须要进行导入
<style>
ul{
 width: 100%;
 margin:0px;
 padding:0px;
 list-style: none;
}

ul li{
	width: 33.33%;
	float: left;
	text-align: center;
}

ul li select{
	width: 100%;
	height: 200px;
}

ul li input {
	
}
</style>
<script type="text/javascript">
	$(function(){//这个方法是加载完body后再加载的方法  可以有效
		$("#right").click(function(){//向右删除下拉框的值   向左增加下拉框的值 的点击事件
			$("#s1 option:selected").appendTo("#s2");
			
		});
		
		$("#left").click(function(){//向左删除下拉框的值   向右增加下拉框的值  的点击事件
			$("#s2 option:selected").appendTo("#s1");
		});
		
	});
</script>
</head>
<body>
	<h1>用户权限管理</h1>点击打开链接
	<ul>
		<li>
			<select id="s1" multiple="multiple" >
				<option value="1">员工资料查询</option>
				<option value="2">员工资料新增</option>
				<option value="3">员工资料修改</option>
			</select>
		</li>
		<li>
			<input type="button" id="right" value=">>"><br>
			<input type="button" id="left" value="<<">
		</li>
		<li>
			<select id="s2" multiple="multiple">
				<option value="4">员工资料删除</option>
			</select>
		</li>
	</ul>
</body>
</html>

没有jQuery库可以点击这里进行下载点击下载

界面效果展示图片：

点击前：