Introduction: In this article I will show with an example to move single or multiple selected items between two listbox controls using jQuery in Asp.Net with C# and VB.
In previous related articles i explained How to Move items from one checkboxlist to other in asp.net andAdd or remove items from one checkboxlist to other andCheck uncheck all checkboxes in asp.net gridview using jquery andJquery to bind dropdownlist dynamically from sql server table andSave, edit, update, delete and bind listbox using linq to sql
Description: While working on Asp.Net project I got the requirement to move items from one listbox to other as shown in demo image above This can be easily done server side and client side. Here in this example I have used jQuery to make it work client side.
I have demonstrated how easily we can move items from first listbox to second listbox and vice versa by using four button controls. First button for moving selected item from first to second listbox, second button for moving all items whether selected or not to second listbox, third button for moving selected items back to first listbox and fourth one is for moving all items back to first listbox.
Implementation: Lets create a web page for demonstration purpose:
HTML source:
$[document].ready[function [] {
$["#btnMoveRight"].on["click", function [] {
var selectedOptions = $['#lbTeamA > option:selected'];
if [selectedOptions.length == 0] {
alert["Select at least one item to move"];
return false;
}
$['#lbTeamA > option:selected'].appendTo['#lbTeamB'];
e.preventDefault[];
}];
$["#btnMoveAllRight"].on["click", function [] {
$['#lbTeamA > option'].appendTo['#lbTeamB'];
e.preventDefault[];
}];
$["#btnMoveLeft"].on["click", function [] {
var selectedOptions = $['#lbTeamB > option:selected'];
if [selectedOptions.length == 0] {
alert["Select at least one item to move"];
return false;
}
$['#lbTeamB > option:selected'].appendTo['#lbTeamA'];
e.preventDefault[];
}];
$["#btnMoveAllLeft"].on["click", function [] {
$['#lbTeamB > option'].appendTo['#lbTeamA'];
e.preventDefault[];
}];
}];
function selectAll[] {
$["#lbTeamA option"].attr["selected", "selected"];
$["#lbTeamB option"].attr["selected", "selected"];
}
Move Items from one ListBox to other using jQuery
Team A
Team B
Asp.Net C# Code
protected void btnSubmit_Click[object sender, EventArgs e]
{
string teamASelectedMembers = Request.Form[lbTeamA.UniqueID];
lbTeamA.Items.Clear[];
if [!string.IsNullOrEmpty[teamASelectedMembers]]
{
foreach [string item in teamASelectedMembers.Split[',']]
{
lbTeamA.Items.Add[item];
}
}
string teamBSelectedMembers = Request.Form[lbTeamB.UniqueID];
lbTeamB.Items.Clear[];
if [!string.IsNullOrEmpty[teamBSelectedMembers]]
{
foreach [string item in teamBSelectedMembers.Split[',']]
{
lbTeamB.Items.Add[item];
}
}
ltrlTeamA.Text = "Team A members:" + teamASelectedMembers;
ltrlTeamB.Text = "Team B members:" + teamBSelectedMembers;
}
Asp.Net VB Code
Protected Sub btnSubmit_Click[sender As Object, e As EventArgs]
Dim teamASelectedMembers As String = Request.Form[lbTeamA.UniqueID]
lbTeamA.Items.Clear[]
If Not String.IsNullOrEmpty[teamASelectedMembers] Then
For Each item As String In teamASelectedMembers.Split[","c]
lbTeamA.Items.Add[item]
Next
End If
Dim teamBSelectedMembers As String = Request.Form[lbTeamB.UniqueID]
lbTeamB.Items.Clear[]
If Not String.IsNullOrEmpty[teamBSelectedMembers] Then
For Each item As String In teamBSelectedMembers.Split[","c]
lbTeamB.Items.Add[item]
Next
End If
ltrlTeamA.Text = Convert.ToString["Team A members:"] & teamASelectedMembers
ltrlTeamB.Text = Convert.ToString["Team B members:"] & teamBSelectedMembers
End Sub
Note: To select multiple items in ListBox, hold the control key and then select multiple items with mouse.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better andIf you like my work; you can appreciate by leaving your comments, hitting Facebooklike button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
- Tweet
- Share
- Share
- Share