Jquery实现select左右栏的添加移除

首先是效果展示, 兼容火狐，IE6+，谷歌没测试有

aaarticlea/png;base64,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" alt="" />

java后台数据准备

　　　　 List<JCClass> GroupList = KBTGroup.GetGroupList();
        String userGroup = UserConfig.Get("groupData");
        if(JCUtil.IsEmptyList(GroupList)==false){
            Iterator<JCClass> groupIter = GroupList.iterator();
            while (groupIter.hasNext()) {
                JCClass group = groupIter.next();
                if (userGroup.indexOf(group.Get("Name"))>0)
                    groupIter.remove();
            }
            request.setAttribute("userGroup", userGroup);
        }
        request.setAttribute("GroupList", GroupList);

前台js代码

<script language="javascript"><!--
    $(function(){var groupDatas = $("#groupDatas").val().split(";");
        var selObj = $("#userGroup");
        for(var i=0;i<groupDatas.length-1;i++){
               selObj.append("<option value='"+groupDatas[i]+"'>"+groupDatas[i]+"</option>");
        }
    });

　　function getTrueData(selectID){
        var data = "";
        var count = $("#"+selectID+" option").length;
        for(var i=0;i<count;i++){
            data=data+$("#"+selectID).get(0).options[i].text+";";
        }
        return data;
    }
    function dbClickData(e,sourceID,reID){
        var text=$(e).val();
          reverseData(text,sourceID,reID);
    }
    function clickReverseBtn(sourceID,reID){
        var selOpt = $("#"+sourceID+" option:selected");
        var text = $(selOpt).val();
        reverseData(text,sourceID,reID);
    }
    function reverseData(text,sourceID,reID){
        var selOpt = $("#"+sourceID+" option:selected");
            selOpt.remove(); 

            var selObj = $("#"+reID);
           selObj.append("<option value='"+text+"'>"+text+"</option>");
    }
    function clearGroup(){
        var groupDatas = getTrueData('userGroup').split(";");
        var selObj = $("#groupList");
        for(var i=0;i<groupDatas.length-1;i++){
               selObj.append("<option value='"+groupDatas[i]+"'>"+groupDatas[i]+"</option>");
        }
        $("#userGroup").empty();
    }

　　function SubmitPage(){
        var groupData = getTrueData('userGroup');
　　　　 var queryGroup = $("#queryGroup").is(":checked");
        $.ajax({
            url:'save.do',type:'post',
            data:{groupData:groupData,queryGroup:queryGroup},
            dataType:'html',cache:false,global:false,
            error: function() {
                alert("网络错误!");
            },
            success:function(msg){
                if(msg!="success"){
                    alert(msg);
                    return;
                }
            }
        });
    }
</script>

jsp代码

<table>
     <tr>
       <td>
     　　 <select id="groupList" size="9" style="width: 180px;" ondblclick="clickReverseBtn('groupList','userGroup')">
         　　<c:forEach items="${GroupList}" varStatus="i" var="m">
         　　   <option value="${m.Get('Name')}">${m.Get('Name')}</option>
         　　</c:forEach>
         </select>
       </td>
       <td>
          <input type="button" value=">>" onclick="clickReverseBtn('groupList','userGroup')" />
       　 <br />
          <br />
          <br />
          <br />
          <input type="button" value="&lt; &lt;" onclick="clickReverseBtn('userGroup','groupList')" />
          <br />
          <input type="button" value="清除" onclick="clearGroup()" />
       </td>
       <td>
       　　<select id="userGroup" size="9" style="width: 180px;" ondblclick="clickReverseBtn('userGroup','groupList')"></select>
       </td>
    </tr>
 </table>