使用javascript左右互移,然后使用Hidden记住右边listbox的内容,用于服务端处理。
页面代码
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="PropertyConfigManager.aspx.cs" Inherits="PropertyConfigManager" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
function moveLeftOrRight(leftObjId,RightObjId,txtId,isMoveAll,isLeftToRight)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
var fromObj;
var toObj;
if(isLeftToRight)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
fromObj = document.getElementById(leftObjId);
toObj = document.getElementById(RightObjId);
}
else
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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--)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(isMoveAll || fromObj.options[i].selected)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if(isLeftToRight)
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
hiddenProperties.value = hiddenProperties.value + fromObj.options[i].value+",";
}
else
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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);
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// ]]>
</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>