Asp.net listbox javascript 无需 postback
来源：http://www.dotnet-developer.de/2008/07/aspnet2005/ajax/using-javascript-on-listboxes-in-aspnet/The JavaScript code:
<script type="text/javascript" language="javascript">
function MoveItem(ctrlSource, ctrlTarget) {
var Source = document.getElementById(ctrlSource);
var Target = document.getElementById(ctrlTarget); if ((Source != null) && (Target != null)) {
while ( Source.options.selectedIndex >= 0 ) {
var HiddenList = document.getElementById('<%= SelectedAdditionalInvolved.ClientID %>') //The hidden field
var SelectedValue = Source.options.value + ','; // Hidden List is comma seperated
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = Source.options.text;
newOption.value = Source.options.value;
Target.options = newOption; //Append the item in Target
Source.remove(Source.options.selectedIndex);//Remove the item from Source
if (HiddenList.value.indexOf(SelectedValue) == -1)
{
HiddenList.value += SelectedValue; // Add it to hidden list
}
else
{
HiddenList.value = HiddenList.value.replace(SelectedValue,""); // Remove from Hidden List
}
}
}
}
</script>
In my aspx:
<span class ="selectionListUsernames">
<asp:ListBox ID="AdditionalUsers" Width="100%" Height="100%" runat="server" AutoPostBack="false" />
</span>
<span class="selectionListUsernamesButtons"><br /><br />
<input onclick="Javascript:MoveItem('<%= AdditionalUsers.ClientID %>', '<%= AdditionalUserSelection.ClientID %>');" type="button" value="->" /><br /><br />
<input onclick="Javascript:MoveItem('<%= AdditionalUserSelection.ClientID %>', '<%= AdditionalUsers.ClientID %>');" type="button" value="<-" />
</span>
<span class="selectionListUsernames">
<asp:ListBox ID="AdditionalUserSelection" width="100%" Height="100%" runat="server" AutoPostBack="false" />
</span><asp:HiddenField ID="SelectedAdditionalInvolved" runat="server" />
In my css:
.selectionListUsernames
{
float:left;
width: 300px;
height: 150px;
}
.selectionListUsernamesButtons
{
float: left;
width: 120px;
text-align: center;
vertical-align:middle;
}
SelectedAdditionalInvolved 全部数值都会存在里头
页:
[1]