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

浏览数：23 / 时间：2015年06月09日

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

技术分享

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>