Following script will move the selected items from one list box item to another list box item.
Markup:
<asp:ListBox ID="lstBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="A" Value="1"></asp:ListItem>
<asp:ListItem Text="B" Value="2"></asp:ListItem>
<asp:ListItem Text="C" Value="3"></asp:ListItem>
<asp:ListItem Text="D" Value="4"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="btnMoveRight" runat="server" Text=">>" />
<asp:Button ID="btnMoveLeft" runat="server" Text="<<" />
<asp:ListBox ID="lstBox2" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="E" Value="5"></asp:ListItem>
<asp:ListItem Text="F" Value="6"></asp:ListItem>
<asp:ListItem Text="G" Value="7"></asp:ListItem>
<asp:ListItem Text="H" Value="8"></asp:ListItem>
</asp:ListBox>
JQuery script:
$(document).ready(function() {
$('#<%=btnMoveRight.ClientID %>').click(function() {
var selectedOptions = $('#<%=lstBox1.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox2.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
$('#<%=btnMoveLeft.ClientID %>').click(function() {
var selectedOptions = $('#<%=lstBox2.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move");
return false;
}
$('#<%=lstBox1.ClientID %>').append($(selectedOptions).clone());
$(selectedOptions).remove();
return false;
});
});
