两个选择框，左右互选添加
触发事件的方法：编辑用户组成员
function editGroupUser(id) {$.ajax( {type : "POST",url : "/group/groupUserquery.json",dataType : "json",data : "id=" + id,success : function(data) {/** * 这个组已经存在的成员 */var gxHtml = "<select name='myGroupUser' border='1' multiple style='width:200px;height:285px;' >";$.each(data.alreadylinkUser, function(i, noCo) {gxHtml += "<option value=" + noCo.userId + ">"+ noCo.userName + "</option>";});gxHtml += "</select>";$("#myGroupUsers").html(gxHtml);/** * 还没有分组的成员 */var wgxHtml = "<select name='noGroupUser' border='1' multiple style='width:200px;height:285px; ' >";$.each(data.noLinkUser, function(i, noCo) {wgxHtml += "<option value=" + noCo.userId + ">"+ noCo.userName + "</option>";});wgxHtml += "</select>";$("#noGroupUsers").html(wgxHtml);$("#myGroupName").text(data.group.groupName);$("#myGroupId").val(data.group.id);$("#dialog_form_editGroupUser").dialog("open");},error : function(XMLHttpRequest, textStatus, errorThrown) {alert("错误状态：" + textStatus + "\n错误信息：" + errorThrown);}});}<div id ="dialog_form_editGroupUser" style="display: none;"><form><table> <tr><td height="33" align="right" width="250"><b>用户组名称：</b></td><td id="myGroupName"></td><td ><input id="myGroupId" type="hidden" value=""/></td></tr></table><table border="0" width="100%"><thead border="1"><tr><td height="25" style="padding-left: 40px" align="left">没有分组成员：</td><td width="70"></td><td height="25" align="left" >此用户组已存在的成员：</td></tr></thead><tbody border="1"><tr><td id="noGroupUsers" style="padding-left: 40px"></td><td width="100px" height="285px" align="center" valign="middle"><table><tr><td width="40" align="center"><input type="button" value=">>" onclick="addItem(this.form);"></td></tr><tr><td width="40" align="center"><input type="button" value="<<" onclick="subItem(this.form)"></td></tr><tr><td width="40" align="center"><input type="button" value="ALL>>" onclick="addAllItem(this.form)"></td></tr><tr><td width="40" align="center"><input type="button" value="<<ALL" onclick="subAllItem(this.form)"></td></tr></table></td> <td id="myGroupUsers" width="40%"></td></tr></tbody> </table> <table><tr height="5"></tr></table></form></div>
/** * 添加到此用户组中 * * @param objForm */function addItem(objForm) {var valueAry = new Array();var textAry = new Array();var groupElement = objForm.elements["myGroupId"];var leftElement = objForm.elements["noGroupUser"];var rightElement = objForm.elements["myGroupUser"];var count = 0;var i, j;for (i = leftElement.options.length-1; i >= 0 ; i--) {if (leftElement.options[i].selected) {valueAry[count] = leftElement.options[i].value;textAry[count] = leftElement.options[i].text; addMyGroupUser(leftElement.options[i].value, groupElement.value); leftElement.options[i] = null;count++;}}var count1 = rightElement.options.length;count1 = count1 > 0 ? count1 : 0;for (j = 0; j < count; j++) {rightElement.options[count1] = new Option(textAry[j], valueAry[j]);count1++;}}/** * 添加操作 * * @param userId * @param companyId */function addMyGroupUser(userId, groupId) {$.ajax({type : "POST",url : "/group/addGroupUser.json",dataType : "json",data : "userId=" + userId + "&groupId=" + groupId + "&roleId=2" ,success : function(data) {},error : function(XMLHttpRequest, textStatus, errorThrown) {alert("错误状态：" + textStatus + "\n错误信息：" + errorThrown);}});}/** * 删除此成员 */function subItem(objForm) {var valueAry = new Array();var textAry = new Array();var groupElement = objForm.elements["myGroupId"];var leftElement = objForm.elements["noGroupUser"];var rightElement = objForm.elements["myGroupUser"];var count = 0;var i, j;for (i = rightElement.options.length-1; i >=0 ; i--) {if (rightElement.options[i].selected) {valueAry[count] = rightElement.options[i].value;textAry[count] = rightElement.options[i].text;deleteMyGroupUser(rightElement.options[i].value, groupElement.value); rightElement.options[i] = null; count++;}}var count1 = leftElement.options.length;count1 = count1 > 0 ? count1 : 0;for (j = 0; j < count; j++) {leftElement.options[count1] = new Option(textAry[j], valueAry[j]);count1++;}}/** * 删除所有 * * @param objForm */function subAllItem(objForm) {var i;var rightElement = objForm.elements["myGroupUser"];for (i = 0; i < rightElement.options.length; i++) {rightElement.options[i].selected = true;}subItem(objForm);}/** * 添加所有 * * @param objForm */function addAllItem(objForm) {var i;var leftElement = objForm.elements["noGroupUser"];for (i = 0; i < leftElement.options.length; i++) {leftElement.options[i].selected = true;}addItem(objForm);}