两个listbox实现选项的添加删除和搜索

两个listbox实现选项的添加，删除和搜索

贴一下主要的js代码，一些资源我就不传了。下面是效果图。

group.js

function addMember() 
{ 
//右侧选中的项添加到左侧 
var add=$("#newAddMembersId").val(); 
var del=$("#deleteMembersId").val(); 
var ext=$("#existedMemberId").val(); 
var newAddId=""; 
//获取新加的userId 
var addedUsers=$("#enterpriseMember input:checkbox[checked]"); 
for(var i=0;i<addedUsers.length;i++) 
{ 
var checkbox=$(addedUsers[i]); 
var uid=checkbox.next().val(); 
if(add.indexOf(uid)>=0 || (ext.indexOf(uid)>=0 && del.indexOf(uid)<0)) 
{ 
continue; 
} 
if(!(ext.indexOf(uid)>=0 && del.indexOf(uid)>=0)) 
{ 
if(add.indexOf(uid)<0) 
{ 
if(add.length==0) 
add+=uid; 
else 
add+=","+uid; 
} 
} 
//添加数据到左侧列表 
checkbox.removeAttr("checked"); 
var userDiv=checkbox.parent().parent().parent(); 
$("#groupMember").append(userDiv.clone()); 
del=del.replace(uid+",",""); 
del=del.replace(uid,""); 
$("#deleteMembersId").val(del); } 
$("#newAddMembersId").val(add); 
} 
function removeMember() 
{ 
//左侧移除成员 
var add=$("#newAddMembersId").val(); 
var del=$("#deleteMembersId").val(); 
var newRemoveId=""; 
var removedUsers=$("#groupMember input:checkbox[checked]"); 
for(var i=0;i<removedUsers.length;i++) 
{ 
var checkbox=$(removedUsers[i]); 
var uid=checkbox.next().val(); 
if(del.indexOf(uid)>=0) 
{ 
continue; 
} 
if(del.indexOf(uid)<0) 
{ 
if(del.length==0) 
del+=uid; 
else 
del+=","+uid; 
} 
//左侧列表中移除数据 
checkbox.removeAttr("checked"); 
var userDiv=checkbox.parent().parent().parent(); 
userDiv.remove(); 
//$("#enterpriseMember").append(userDiv); 
add=add.replace(uid + ",", ""); 
add=add.replace(uid, ""); 
$("#newAddMembersId").val(add); 
} 
$("#deleteMembersId").val(del); 
} 
//搜索成员，按名字,按部门 
function searchMember() 
{ 
var searchTxt=$.trim($("#searchTxt").val()); 
var memberLIsts=$(".dmlist"); 
//移除上次的结果 
var lastReusts=$(".tempResult"); 
for(var i=0;i<lastReusts.length;i++) 
{ 
$(lastReusts[i]).remove(); 
} 
//为空搜索显示全部列表 
if(searchTxt=="" || searchTxt=="搜索企业成员") 
{ 
//show all hidded ml 
for(var i=0;i<memberLIsts.length;i++) 
{ 
$(memberLIsts[i]).css("display",""); 
} 
return ; 
} 
//hide all memberlist,隐藏所有的列表 
for(var i=0;i<memberLIsts.length;i++) 
{ 
$(memberLIsts[i]).css("display","none"); 
} 
//搜索------------- 
var enterpriseMemberDiv=$("#enterpriseMember"); 
//search by name,add class:tempResult 
var names=$(".sname"); 
for(var i=0;i<names.length;i++) 
{ 
var name=$(names[i]).text(); 
if(name.indexOf(searchTxt)>=0) 
{ 
var result=$(names[i]).parent().parent().parent().clone(); 
result.addClass("tempResult"); 
result.css("display",""); 
enterpriseMemberDiv.append(result); 
} 
} 
//search by departmentName 
var departmentNames=$(".sdepartment"); 
for(var i=0;i<departmentNames.length;i++) 
{ 
var name=$(departmentNames[i]).text(); 
if(name.indexOf(searchTxt)>=0) 
{ 
var result=$(departmentNames[i]).parent().parent().parent().clone(); 
result.addClass("tempResult"); 
result.css("display",""); 
enterpriseMemberDiv.append(result); 
} 
} 
} 
function clearTxt() 
{ 
var txt=$.trim($("#searchTxt").val()); 
if(txt=="搜索企业成员") 
$("#searchTxt").val(""); 
} 
function setsearchTxt() 
{ 
var txt=$.trim($("#searchTxt").val()); 
if(txt=="") 
$("#searchTxt").val("搜索企业成员"); 
} 
//展开折叠器 
function folderToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().next().next().next(); 
listDiv.toggleClass("memberlist"); 
} 
//点击名字折叠 
function folderNameToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().next().next(); 
listDiv.toggleClass("memberlist"); 
} 
function folderNumToggle(event,basePath) 
{ 
var evnet=event||window.event; 
var arrowDiv=event.target||event.srcElement; 
var closeimg=basePath+"/images/folder_close.PNG"; 
var openimg=basePath+"/images/folder_open.PNG"; 
var srcval=$(arrowDiv).attr("src"); 
if(srcval==closeimg) 
$(arrowDiv).attr("src",openimg); 
if(srcval==openimg) 
$(arrowDiv).attr("src",closeimg); 
var listDiv=$(arrowDiv).parent().parent().next().next(); 
listDiv.toggleClass("memberlist"); 
} 

function setCss(event,onoff) 
{ 
var theclass=$.trim(onoff); 
var offclass="addmemberBtnoff"; 
var onclass="addmemberBtnon"; 
var event=event||window.event; 
var thisbtn=event.target||event.srcElement; 
$(thisbtn).removeClass(onclass); 
$(thisbtn).removeClass(offclass); 
if(theclass=="on") 
{ 
$(thisbtn).addClass(onclass); 
} 
else 
{ 
$(thisbtn).addClass(offclass); 
} 
}

test.jsp 

<%@ page language="java" pageEncoding="UTF-8"%> 
<%@ include file="/pages/common/Taglibs.jsp"%> 
<%@ include file="/pages/common/Header.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>添加群组成员</title> 
<script type="text/javascript" src="<%=basePath%>/script/group.js"></script> 
<script type="text/javascript"> 
$(document).keydown(function (event){ 
if(event && event.keyCode==13){ 
$("#searchBtn").click(); 
} 
}); 
function backpage(group_id){ 
//window.history.back(); 
window.location.href="<%=basePath%>/server/group?group_id="+group_id; 
} 
function closeWin() 
{ 
this.close(); 
} 
function saveChanges() { 
function okFun() { 
var deleteMembersId = $("#deleteMembersId").val(); 
var newAddMembersId = $("#newAddMembersId").val(); 
var group_id = $("#group_id").val(); 
window.location.href = "<%=basePath%>/server/group!saveGroupMember?group_id=" 
+ group_id 
+ "&newAddMembersId=" 
+ newAddMembersId 
+ "&deleteMembersId=" + deleteMembersId; 
}; 
function cancelFun() { 
}; 
//PopuMsgBox("确认提示","是否保存？",okFun,cancelFun,150,100); 
okFun(); 
} 
</script> 
</head> 
<body class="bgClass"> 
<div id="addGroupMembercontainer" style="padding:20px 40px;width:auto;height:auto;"> 
<div class="roundGroup" style="float:left;width:241px;height:380px;"> 
<div style="margin-bottom:5px;margin-top:10px;padding-right:2px;"> 
<span class="spangrouptitle" style="line-height:16px;color:#404754;font-weight:bold;font-size:13px;"> 群组<s:property value="group_name"></s:property> </span> 
<span id="menberCount" style="color:#838a97;"> ${gNumber}人</span><br/> 
<hr style="border: 1px dotted #C0D3DC"/> 
</div> 
<div id="groupMember" style="margin-right:8px;height:306px;overflow-y:auto;overflow-x:hidden;width:237px;"> 
<!-- 内容列表 --> 
<s:if test="#request.groupMemberList!=null && #request.groupMemberList.size!=0"> 
<s:iterator value="#request.groupMemberList" id="gmember"> 
<div style="padding-left:5px;padding-right:1px;"> 
<div style="height:16px;" onclick="toggleCheck(event);"> 
<div style="width:auto;float:left;"> 
<input type="checkbox" /> 
<input type="hidden" value="<s:property value="#gmember.id"/>" name="userId" /> 
<span style="color:#404754;"><s:property value="#gmember.name" /></span> 
</div> 
<div class="positionblue" style="float:right;width:auto;text-align:right;"> 
<span style="color:#838a97;"><s:property value="#gmember.position_name" /></span> 
</div> 
</div> 
<div style="clear:left;"></div> 
</div> 
</s:iterator> 
</s:if> 
</div> 
</div> 
<div style="float:left;width:80px;padding-top:150px;text-align:center;"> 
<div style="height: auto;"> 
<input class="addmemberBtn addmemberBtnon" onmouseover="setCss(event,'on')" onmouseout="setCss(event,'off')" type="button" value="<<添加" onclick="addMember()" /> 
</div> 
<br/> 
<div style="height:auto;"> 
<input class="addmemberBtn addmemberBtnon" onmouseover="setCss(event,'on')" onmouseout="setCss(event,'off')" type="button" value="移除>>" onclick="removeMember()" /> 
</div> 
</div> 
<div class="roundGroup" style="float:left;width:241px;height:380px;"> 
<div style="margin-bottom:5px;margin-top:10px;padding-right:2px;"> 
<span class="spangrouptitle" style="color:#404754;font-weight:bold;font-size:13px;"> 所有企业成员</span> 
<span style="color:#838a97;"> ${eNumber}人</span><br/> 
<hr style="border: 1px dotted #C0D3DC" /> 
</div> 
<div style="height:30px;padding-left:5px;"> 
<div style="height:14px;float:left;"><input id="searchTxt" style="width:215px;line-height:14px;color:#838a97;" type="text" value="搜索企业成员" onfocus="clearTxt()" onblur="setsearchTxt()"/></div> 
<div style="height:14px;float:left;margin-top:4px;"><img id="searchBtn" onclick="searchMember();" style="width:14px;height:14px;cursor:pointer;" src="<%=basePath%>/images/searchBtn.PNG"/></div> 
<div style="clear:both;"></div> 
</div> 
<div id="enterpriseMember" style="height:280px;overflow-y:auto;overflow-x:hidden;width:233px;"> 
<!-- 内容列表 --> 
<s:if test="#request.departmentMemberList!=null && #request.departmentMemberList.size!=0"> 
<s:iterator value="#request.departmentMemberList" id="department"> 
<div class="dmlist" style="padding-bottom:2px;"> 
<div style="float:left;height:13px;padding-top:0px;"><img class="folder" style="" src="<%=basePath%>/images/folder_close.PNG" onclick="folderToggle(event,'<%=basePath%>')"/></div> 
<div style="float:left;height:13px;"><span style="cursor:pointer;" onclick="folderNameToggle(event,'<%=basePath%>')"><s:property value="#department.departmentName"/><span style="color:#838a97;" onclick="folderNumToggle(event,'<%=basePath%>')"> <s:property value="#department.memberCount"/>人</span></span></div> 
<div style="clear:both;"></div> 
<div class="ml memberlist"> 
<s:iterator value="#department.memberList" id="emember"> 
<div style="padding-left:5px;padding-right:1px;"> 
<div style="height:16px;"> 
<div style="float:left;"> 
<input type="checkbox"/> 
<input type="hidden" value="<s:property value="#emember.id"/>" name="userId" /> 
<span class="sname" style="color:#404754;"><s:property value="#emember.name" /></span> 
</div> 
<div class="positionblue" style="float:right;text-align:right;height:16px;"> 
<span class="sdepartment" style="color:#838a97;"><s:property value="#emember.position_name" /></span> 
</div> 
</div> 
<div style="clear:both;"></div> 
</div> 
</s:iterator> 
</div> 
</div> 
</s:iterator> 
</s:if> 
</div> 
</div> 
<div style="clear:both;width:600px;"> 
<div style="text-align:right;"> 
<input class="commonButton" style="" type="button" value="保存" onclick="saveChanges()"/> 
<input type="hidden" id="newAddMembersId" name="newAddMembersId" value=""/> 
<input type="hidden" id="deleteMembersId" name="deleteMembersId" value=""/> 
<input type="hidden" id="existedMemberId" name="existedMemberId" value="${existedMemberId}"/> 
<input type="hidden" id="group_id" name="group_id" value="${group_id}"/> 
</div> 
</div> 
</div> 
</body> 
</html>