Re: Move data between two list box using javascript.

NC01 — Sun, 18 May 2008 15:16:22 GMT

Just remember that if a PostBack occurs on your page, the ListBoxes will revert to the way they were previously, unless you persist the current values in them and duplicate your efforts server-side.

NC...

Re: Move data between two list box using javascript.

FarhanK — Fri, 16 May 2008 22:41:26 GMT

Hi,

Please check the following working solution

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPopup.aspx.cs" Inherits="TestPopup" %>

<!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>Untitled Page</title>
    <script type="text/javascript">
        /*
            - Function MoveItems()
            - Direction: Specifies direction i.e. L = Left, R = Right
            - All: Move All items 1 = All, 0 = Selected
        */
        function MoveItems(Direction, All)
        {
            var LstLeft;
            var LstRight;
            var Removed = '';
            var i;

            if (Direction == 'R')
            {
                var LstLeft = document.getElementById("<%=LstLeft.ClientID %>");
                var LstRight = document.getElementById("<%=LstRight.ClientID %>");
            }
            else
            {
                var LstLeft = document.getElementById("<%=LstRight.ClientID %>");
                var LstRight = document.getElementById("<%=LstLeft.ClientID %>");
            }

            for (i=0; i<LstLeft.length; i++)
            {
                if (LstLeft.options[i].selected || All == 1)
                    if(ItemExists(LstRight, LstLeft.options[i].value) == 0)
                    {
                        LstRight[LstRight.length] = new Option(LstLeft.options[i].text, LstLeft.options[i].value, true);
                        Removed = Removed + LstLeft.options[i].value + ',';
                    }
            }
            RemoveFromList(LstLeft, Removed);
            return false;
        }

        function RemoveFromList (Lst, Items)
        {
            var Removed = Items.split(',');
            var j;
            var x;
            for (j=0; j<Removed.length; j++)
            {
                for (x=0; x<Lst.length; x++)
                {
                    if (Lst.options[x] != null && Lst.options[x].value == Removed[j])
                    {
                        Lst.options[x] = null;
                    }
                }
            }
        }

        function ItemExists(Lst, value)
        {
            var Flag = 0;
            var i = 0;
            for (i=0; i<Lst.length; i++)
            {
                if (Lst.options[i].value == value)
                {
                    Flag = 1;
                    break;
                }
            }
            return Flag;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="LstLeft" runat="server" SelectionMode="multiple" Width="200px" Rows="5" >
            <asp:ListItem Value="0" Text="Farhan"></asp:ListItem>
            <asp:ListItem Value="1" Text="Moin"></asp:ListItem>
            <asp:ListItem Value="2" Text="Haroon"></asp:ListItem>
            <asp:ListItem Value="3" Text="Khurram"></asp:ListItem>
            <asp:ListItem Value="4" Text="Mansur"></asp:ListItem>
        </asp:ListBox>
          
        <asp:ListBox ID="LstRight" runat="server" SelectionMode="multiple" Width="200px" Rows="5">
        </asp:ListBox>
        <br />
        <asp:Button ID="BtnRight" runat="server" Text=">" OnClientClick="return MoveItems('R', 0);" />
         
        <asp:Button ID="BtnLeft" runat="server" Text="<" OnClientClick="return MoveItems('L', 0);"/>
        <asp:Button ID="BtnRightAll" runat="server" Text=">>" OnClientClick="return MoveItems('R', 1);" />
         
        <asp:Button ID="BtnLeftAll" runat="server" Text="<<" OnClientClick="return MoveItems('L', 1);" />
    </div>
    </form>
</body>
</html>

Re: Move data between two list box using javascript.

binukumar — Fri, 16 May 2008 15:50:07 GMT

this below code will add items to the listbox using javascript

function AddItemToListBox(text, value)
{
     var lb = document.getElementById(<listboxid>);
    var newOption = document.createElement('OPTION');
    newOption.text = text;
    newOption.value = value;
    lb.options.add(newOption);
}

hope this helps

Move data between two list box using javascript.

yeotumitsu@sify.com — Fri, 16 May 2008 15:11:40 GMT

Hi,

I have 2 list boxes and 4 input buttons. input buttons are shiftRight, shiftLeft, shiftAllRight,ShiftAllLeft.

I need to move the selected value from one list box to other one on the basis of button clicked using javascript.

Value moved to other list box should also be removed from from source list box.

shiftAllLeft and shiftAllRight buttons should move all the listbox values to left or right.

Please help. Thanks in advance.

Client Side Web Development

Re: Move data between two list box using javascript.

Re: Move data between two list box using javascript.

Re: Move data between two list box using javascript.

Move data between two list box using javascript.