两个Listbox内容左右互相移动
使用javascript左右互移，然后使用Hidden记住右边listbox的内容，用于服务端处理。
页面代码
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="PropertyConfigManager.aspx.cs" Inherits="PropertyConfigManager" %><!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 runat="server"> <title>Untitled Page</title><script language="javascript" type="text/javascript">function moveLeftOrRight(leftObjId,RightObjId,txtId,isMoveAll,isLeftToRight) 
{ 
var fromObj; var toObj; if(isLeftToRight)
{ fromObj = document.getElementById(leftObjId); toObj = document.getElementById(RightObjId);
} else { fromObj = document.getElementById(RightObjId); toObj = document.getElementById(leftObjId); } var hiddenProperties = document.getElementById(txtId); var lengthOfToObj=toObj.length; for(var i=fromObj.length-1;i>-1;i--) { if(isMoveAll || fromObj.options[i].selected) { if(isLeftToRight) { hiddenProperties.value = hiddenProperties.value + fromObj.options[i].value+","; } else { hiddenProperties.value = hiddenProperties.value.replace(fromObj.options[i].value+",",""); } toObj.add(new Option(fromObj.options[i].text,fromObj.options[i].value),lengthOfToObj); toObj.options[lengthOfToObj].selected=true; fromObj.options[i].removeNode(true); } } 
}// ]]></script></head><body> <form id="form1" runat="server"> <div> <table width=100%> <tr> <td><asp:Label ID="_labelRepositories" runat="server" Text="Repository list" Width="170px"></asp:Label></td> <td> <asp:Label ID="_lableObjectType" runat="server" Text="Object Type" Width="170px"></asp:Label></td> <td></td> </tr> <tr> <td> <asp:DropDownList ID="_repositoriesList" runat="server" Width="218px" AutoPostBack="True" OnSelectedIndexChanged="_repositoriesList_SelectedIndexChanged"> </asp:DropDownList> </td> <td> <asp:DropDownList ID="_dropdownListObjectType" runat="server" Width="218px" AutoPostBack="True" OnSelectedIndexChanged="_dropdownListObjectType_SelectedIndexChanged"> </asp:DropDownList></td> <td></td></tr> <tr><td> <asp:Label ID="_availablePropertiesLabel" runat="server" Text="Available Properties" Width="170px"></asp:Label></td><td style="width: 5px"></td><td> <asp:Label ID="_selectedPropertiesLabel" runat="server" Text="Selected Properties" Width="170px"></asp:Label></td></tr> <tr> <td> <asp:ListBox ID="_availableProperties" runat="server" SelectionMode="Multiple"></asp:ListBox></td> <td style="width: 5px"> <table> <tr> <td> <input id="_buttonAdd" type="button" value="Add >" onclick="<%="javascript:moveLeftOrRight('"+_availableProperties.ClientID+"','"+_selectedProperties.ClientID+"','"+_hiddenSelectedProerties.ClientID+"',false,true);" %>" /></td> </tr> <tr> <td style="height: 26px"><input id="_buttonRemove" type="button" value="Remove <" size="" onclick="<%="javascript:moveLeftOrRight('"+_availableProperties.ClientID+"','"+_selectedProperties.ClientID+"','"+_hiddenSelectedProerties.ClientID+"',false,false);" %>"/></td> </tr> <tr> <td><input id="_buttonAddAll" type="button" value="Add All >>" onclick="<%="javascript:moveLeftOrRight('"+_availableProperties.ClientID+"','"+_selectedProperties.ClientID+"','"+_hiddenSelectedProerties.ClientID+"',true,true);" %>" /></td> </tr> <tr> <td><input id="_buttonRemoveAll" type="button" value="Remove All <<" onclick="<%="javascript:moveLeftOrRight('"+_availableProperties.ClientID+"','"+_selectedProperties.ClientID+"','"+_hiddenSelectedProerties.ClientID+"',true,false);" %>" /></td> </tr> </table> </td><td> <asp:ListBox ID="_selectedProperties" runat="server" SelectionMode="Multiple"></asp:ListBox></td></tr> <tr> <td> <asp:HiddenField ID="_hiddenSelectedProerties" runat="server" /> </td> <td style="width: 5px"> </td> <td> </td> </tr> <tr> <td> </td> <td style="width: 5px"> </td> <td align="right" > <table> <tr> <td style="width: 100px"> <asp:Button ID="_buttonOK" runat="server" Text="OK" OnClick="_buttonOK_Click" /></td> <td style="width: 100px"> <asp:Button ID="_buttonCancel" runat="server" Text="Cancel" /></td> </tr> </table> </td> </tr> </table> <br /> </div> </form></body></html>
