前言

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

20151123173320972

代码

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

Center

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

<%@ 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中看一下它的详细介绍：

Center 1