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

首先是效果展示, 兼容火狐,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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。