jQuery_review之jQuery实现左右多选内容交换

最新推荐文章于 2020-06-14 20:56:41 发布

陈字文

最新推荐文章于 2020-06-14 20:56:41 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38129237

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在HTML中，通过Select设置multiple=“multiple”设置当前的框为多选框，也就意味着可以同时选择多个内容。在我们的系统中经常可以看到左右两侧的选择，甚至在腾讯的应用中，都有很多类似的功能实现。这种功能是非常实用的，就可以将它封装为一个标签，然后设置两个LIST进行内容的互换，这些对于项目组的快速开发是非常有帮助的，因为JSP的功能就是在于丰富的可以扩展的标签，难道不是么？

在这个小的复习里面，一个简单的要注意的点就是，对于下拉选单的内容的筛选，是通过：selected来实现的，一定将这个内容和多选框的attr("checked")区分开。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		var opArea = $("div.dSelectOpArea");
  		opArea.find(".dSelectAllRight").click(function(){
			$("#select1 option").remove().appendTo($("#select2"));
  		});
  		opArea.find(".dSelectAllLeft").click(function(){
			$("#select2 option").remove().appendTo($("#select1"));
  		});
  		opArea.find(".dSelectOneRight").click(function(){
			$("#select1 option:selected").remove().appendTo($("#select2"));
  		});
  		opArea.find(".dSelectOneLeft").click(function(){
			$("#select2 option:selected").remove().appendTo($("#select1"));
  		});
  	})
  </script>
  <style type="text/css">
  	div.dSelectOpArea{
  		height:120px;
  		width:60px;
  	}
  	div.dSelectOpArea button{
  		width:60px;
  		margin-top:5px;
  	}
  	table.dbSelectContainer{
  		width:240px;
  		height:120px;
  	}
  	#select1,#select2{
  		width:80px;
  		height:120px;
  	}
  </style>
  </head>
  <body>
  	<form action="#">
  		<table class="dbSelectContainer">
  			<tr>
  				<td>
  					<select multiple="multiple" id="select1">
						<option value="oracle">oracle</option>
						<option value="java">java</option>
						<option value="english">english</option>
						<option value="pmp">pmp</option>
						<option value="javascript">javascript</option>
						<option value="php">php</option>
						<option value="Xplatform">Xplatform</option>
					</select>
  				</td>
  				<td>
  					<div class="dSelectOpArea">
						<button class="dSelectAllRight">>></button>
						<button class="dSelectAllLeft"><<</button>
						<button class="dSelectOneRight">></button>
						<button class="dSelectOneLeft"><</button>
					</div>
  				</td>
  				<td>
  						<select multiple="multiple" id="select2">
						</select>
  				</td>
  			</tr>
  		</table>
  	</form>
  </body>
</html>