This article will show you how you can move listbox item
from one listbox to another listbox using jquery in asp.net. This will show to transfer
the how to transfer data from one listbox to other listbox using jquery.
Some of my previous articles are as follows: Bind
and Retrieve ListBox Selected Value in MVC Using C#.Net, Stylish
RadioButton, DropdownList, ListBox and TextBox Control In Asp.Net Using Css,
Move
ListBox Items From one ListBox To another ListBox Using C#.Net In Asp.Net, How
to add/move multiselected items from one listbox to another listbox in C#.Net
and VB.Net | C# multiple selection listbox move Using C#.Net, Transfer
Listbox Items to Another Listbox Using C#.Net and VB.Net | How to Move List Box
Items to another List Box in C# .
So for this article first we will create a new asp.net application
and add the below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication1.WebForm6"
%>
<!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>Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net
</title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
function
MoveRight() {
$('#<%=ListBox1.ClientID
%>
option:selected').appendTo('#<%=ListBox2.ClientID
%>');
return
false;
}
function
MoveLeft() {
$('#<%=ListBox2.ClientID
%>
option:selected').appendTo('#<%=ListBox1.ClientID
%>');
return
false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr>
<td>
<asp:ListBox ID="ListBox1" runat="server" Height="105px" Width="118px" SelectionMode="Multiple">
<asp:ListItem>List1
Item 1</asp:ListItem>
<asp:ListItem>List1
Item2</asp:ListItem>
<asp:ListItem>List1
Item 3</asp:ListItem>
<asp:ListItem>List1
Item 4</asp:ListItem>
<asp:ListItem>List1
Item 5</asp:ListItem>
</asp:ListBox>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text=">>" OnClientClick="javascript:return
MoveRight();" /><br />
<asp:Button ID="Button2" runat="server" Text="<<" OnClientClick="javascript:return
MoveLeft();" />
</td>
<td>
<asp:ListBox ID="ListBox2" runat="server" Height="105px" Width="118px" SelectionMode="Multiple">
<asp:ListItem>List2
Item 1</asp:ListItem>
<asp:ListItem>List2
Item2</asp:ListItem>
<asp:ListItem>List2
Item 3</asp:ListItem>
<asp:ListItem>List2
Item 4</asp:ListItem>
<asp:ListItem>List2
Item 5</asp:ListItem>
</asp:ListBox>
</td>
</tr>
</table>
</form>
</body>
</html>
|
Now check the below mention jQuery code.
<script language="javascript">
function
MoveRight() {
$('#<%=ListBox1.ClientID
%>
option:selected').appendTo('#<%=ListBox2.ClientID
%>');
return
false;
}
function
MoveLeft() {
$('#<%=ListBox2.ClientID
%>
option:selected').appendTo('#<%=ListBox1.ClientID
%>');
return
false;
}
</script>
|
In above code I have created two function move left and
right. In this function I have passed listbox1 data to the other listbox.
Now we have done run the application check the output.
About the Author
0 comments:
Please let me know your view