Move data between two list box using javascript.

Last post 05-18-2008 11:16 AM by NC01. 3 replies.

Sort Posts:

  • Move data between two list box using javascript.

    05-16-2008, 11:11 AM

     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. 

    Hope it helps.

    -Manas

    =======================================
    If this post is useful to you, please mark it as answer.
    Filed under: ,
  • Re: Move data between two list box using javascript.

    05-16-2008, 11:50 AM
    • Loading...
    • binukumar
    • Joined on 02-12-2008, 4:16 AM
    • Kumar
    • Posts 122

    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

    Do remember to mark this as Answer if this fix your problem

    Thanks & Regards
    BinuKumar S
  • Re: Move data between two list box using javascript.

    05-16-2008, 6:41 PM
    Answer
    • Loading...
    • FarhanK
    • Joined on 01-14-2008, 5:21 PM
    • Posts 240

    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>
            &nbsp;&nbsp;
            <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);" />
            &nbsp;
            <asp:Button ID="BtnLeft" runat="server" Text="<"  OnClientClick="return MoveItems('L', 0);"/>
            <asp:Button ID="BtnRightAll" runat="server" Text=">>"  OnClientClick="return MoveItems('R', 1);" />
            &nbsp;
            <asp:Button ID="BtnLeftAll" runat="server" Text="<<"  OnClientClick="return MoveItems('L', 1);" />
        </div>
        </form>
    </body>
    </html>


    [Please mark the post as answer that helps you.]

    Regards,
    Farhan Uddin Khan
    Enpointe Technologies
  • Re: Move data between two list box using javascript.

    05-18-2008, 11:16 AM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,471
    • TrustedFriends-MVPs

    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...

     

Page 1 of 1 (4 items)
Microsoft Communities
Page view counter