标签:
首先是效果展示, 兼容火狐,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="< <" 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>
标签:
原文地址:http://www.cnblogs.com/liuxing0705/p/4493915.html