This example demonstrates on how to move items between two ListBox using JavaScript.
Here are the code blocks below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ListBox Demo</title>
<script type="text/javascript" language="javascript">
function AddItemInList(fromLeftToRight, isAll)
{
var list1 = document.getElementById('<%= ListBox1.ClientID %>');
var list2 = document.getElementById('<%= ListBox2.ClientID %>');
if(Boolean(fromLeftToRight) == true)
{
MoveItems(list1,list2,isAll);
}
else
{
MoveItems(list2,list1,isAll);
}
return false;
}
function MoveItems(listFrom, listTo, isAll)
{
var toBeRemoved = "";
if(listFrom.options.length > 0)
{
for (i=0; i<listFrom.length; i++)
{
if (listFrom.options[i].selected || (isAll == true))
{
if(Exist(listTo, listFrom.options[i].value) == 0)
{
listTo[listTo.length] = new Option(listFrom.options[i].text, listFrom.options[i].value, true);
toBeRemoved = toBeRemoved + listFrom.options[i].value + ',';
}
}
}
ClearSelection(listTo);
RemoveFromList(listFrom, toBeRemoved);
}
else
{
alert('Unable to Move Items. List is Empty!');
}
}
function RemoveFromList(listFrom, items)
{
var toBeRemoved = items.split(',');
for (var i=0; i < toBeRemoved.length; i++)
{
for (var j = 0; j < listFrom.length; j++)
{
if (listFrom.options[j] != null && listFrom.options[j].value == toBeRemoved[i])
{
listFrom.options[j] = null;
}
}
}
}
function ClearSelection(list)
{
list.selectedIndex = -1;
}
function Exist(list, value)
{
var flag = 0;
for (var i=0; i < list.length; i++)
{
if (list.options[i].value == value)
{
flag = 1;
break;
}
}
return flag;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td >
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Width="150px" Height="150px">
<asp:ListItem>A</asp:ListItem>
<asp:ListItem>B</asp:ListItem>
<asp:ListItem>C</asp:ListItem>
<asp:ListItem>D</asp:ListItem>
<asp:ListItem>E</asp:ListItem>
</asp:ListBox>
</td>
<td valign="middle" align="center" style="width:100px">
<asp:Button ID="ButtonAdd" runat="server" Text=">" Width="50px" OnClientClick="return AddItemInList(true,false);"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" Width="50px" OnClientClick="return AddItemInList(false,false);"/> <br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" Width="50px" OnClientClick="return AddItemInList(true,true);"/><br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" Width="50px" OnClientClick="return AddItemInList(false,true);"/>
</td>
<td><asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple" Width="150px" Height="150px"></asp:ListBox></td>
</tr>
</table>
</div>
</form>
</body>
</html>Method Definitions:
AddItemInList(fromLeftToRight, isAll) – is a method that accepts two parameters. The first parameter indicates if the Lists are to be moved from Left going to the right; the second parameter indicates if all the lists are going to be moved. Check the code above on how to call this method.
MoveItems(listFrom,listTo,isAll) – is a method that accepts three parameters. The first two parametes indicates the ListBox objects – the left and right ListBox; the third parameter indicates if all the lists are going to be moved. Basically this method is where the moving of ListItems is being executed.
RemovedFromList(listFrom, items) – is a method that accepts two parameters. The first one is the ListBox object that contains the ListItems to be removed; the second one contains the concatenated items to be removed.
ClearSelection(list) – a method that resets the Selection of the ListBox.
Exist(list, value) – a method that takes two parameters. The first one indicates the ListBox object to where the item is to be moved; the second one indicates the value to compare.
Running the code above will show this output below in the page.
Good help for biginners
ReplyDeleteThanks
ReplyDeleteGreat script Kumar.
ReplyDeleteJust one more question. How can i save the data on listbox2 in my table? And when the user comes back to be able to display on listbox2 what they selected before?
Hope you can help me out on this.
Thanks in advanced.
Thanks Lenin
ReplyDeleteFirst how can i save listbox value to my table.Suppose Listbox value is CompanyID and
session["UserID"] is the user ID who login and want ot save listbox value.
for (int i = 0; i <= listbox2.Items.Count - 1; i++)
{
string ID = listbox2.Items[i].Value;
ObjUserLogin.CompanyId = Convert.ToInt32(ID);
ObjUserLogin.UserID = session["UserID"];
ObjUserLogin.SaveDetail();
}
Table Structure
userId CompanyID
1 2
1 4
1 6
1 8
2 7
2 9
and the second when the user come back then bind the listbox2 value on the basis
of above table.
if you have problem then asked me.