码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-11 12:33:08      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/liuxing0705/p/4493915.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!