jQuery 实现左右Select列表数据互换

最新推荐文章于 2018-07-05 18:47:45 发布

小灯光环

最新推荐文章于 2018-07-05 18:47:45 发布

阅读量3.3k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/wlwlwlwl015/article/details/49998439

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

很简单的一个效果，交换两个select列表的option项，常用于“交换”相关的需求，效果图如下所示：

代码

思路很简单，点击按钮无非就是将select1中的选中的option append到select2中，这里我们主要用到的就是jquery的appendTo方法，我们在w3cschool可以看到这个方法的详细介绍，

很简单，下面直接贴上全部代码以供参考：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a,img {
	border: 0;
}

body {
	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

.selectbox {
	width: 500px;
	height: 220px;
	margin: 40px auto 0 auto;
}

.selectbox div {
	float: left;
}

.selectbox .select-bar {
	padding: 0 20px;
}

.selectbox .select-bar select {
	width: 150px;
	height: 200px;
	border: 4px #A0A0A4 outset;
	padding: 4px;
}

.selectbox .btn {
	width: 50px;
	height: 30px;
	margin-top: 10px;
	cursor: pointer;
}
.bottom-btn{
	width: 500px;
	height: 220px;
	margin: 40px auto 0 auto;
	margin-left: 40%;
}
</style>

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/common/common.js"></script>
<script type="text/javascript">
	$(function() {
		//移到右边
		$('#add').click(function() {
			//获取选中的选项，删除并追加给对方
			$('#select1 option:selected').appendTo('#select2');
		});

		//移到左边
		$('#remove').click(function() {
			$('#select2 option:selected').appendTo('#select1');
		});

		//全部移到右边
		$('#add_all').click(function() {
			//获取全部的选项,删除并追加给对方
			$('#select1 option').appendTo('#select2');
		});

		//全部移到左边
		$('#remove_all').click(function() {
			$('#select2 option').appendTo('#select1');
		});

		//双击选项
		$('#select1').dblclick(function() { //绑定双击事件
			//获取全部的选项,删除并追加给对方
			$("option:selected", this).appendTo('#select2'); //追加给对方
		});

		//双击选项
		$('#select2').dblclick(function() {
			$("option:selected", this).appendTo('#select1');
		});

	});
	
	function reGrouping(){
		var group1 = [];
		var options = $('#select1 option');
		for(var i=0;i<options.length;i++){
			group1.push(options.eq(i).val());
		}
		var str1 =$('#sp1').html()+','+group1.join(',');
		
		var group2 = [];
		var options2 = $('#select2 option');
		for(var i=0;i<options2.length;i++){
			group2.push(options2.eq(i).val());
		}
		var str2 =$('#sp2').html()+','+group2.join(',');
		
		 $.ajax({
		        method:'post',
		        url:'../../app/mutualEvaluation/reGrouping',
		        data:{str1:str1,str2:str2},
		        dataType:'json',
		        cache:false,
		        success:function(data)
		        { 
		        	if("ok"==data.data)
					{
						alert("调整分组成功!");
						return ;
					}else
					{
						alert(data.data);
						return ;	
					}
		        }
		    });
		 location.href = '../../app/mutualEvaluation/toGroupingPage';
	}
	
	function toGroupingPage(){
		location.href = '../../app/mutualEvaluation/toGroupingPage';
	}
</script>
<link href="<%=path%>/css/mytable.css" rel="stylesheet" type="text/css" />
</head>
<body>
		
		<div class="selectbox">
			<div class="select-bar">
				<span id="sp1">${groupOneName}</span><br/>
				<select multiple="multiple" id="select1">
					<c:forEach items="${groupOneList}" var="item">
						<option value="${item.stunumber}">${item.stuname}</option>
					</c:forEach>
				</select>
			</div>
	
			<div class="btn-bar"><br/>
				<span id="add"><input type="button" class="btn" value=">" /></span><br /> 
				<span id="add_all"><input type="button" class="btn" value=">>" /></span><br /> 
				<span id="remove"><input type="button" class="btn" value="<" /></span><br /> 
				<span id="remove_all"><input type="button" class="btn" value="<<" /></span>
			</div>
	
			<div class="select-bar">
				<span id="sp2">${groupTwoName}</span><br/>
				<select multiple="multiple" id="select2">
					<c:forEach items="${groupTwoList}" var="item">
						<option value="${item.stunumber}">${item.stuname}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		
		<div class="bottom-btn">
			<input type="button" class="btn" value="返回" onClick="toGroupingPage()"/>
			<input type="button" class="btn" value="保存" onClick="reGrouping()"/>
		</div>
</body>
</html>

第66到96行就是互换数据的js代码了，可以看到核心就是通过appendTo去进行option元素的追加，而第100行到133行则是数据整理，毕竟实际应用场景下我们肯定要将数据封装成一定格式传到后台去，我这里的处理方式是：通过join()将数组直接转换成逗号拼接的字符串，然后在这个字符串前再用逗号拼上小组名，这样传到后台之后合理分割即可方便处理，join()方法是javascript中的Array对象的方法，我们在w3cschool中看一下它的详细介绍：