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.


PS: If you wan’t to move ListItems between two ListBox  using the server side approach then you can refer to this example. Moving ListItems between Two ListBox – Server Side Approach

That’s it! I hope you will find this example useful!

 

Technorati Tags: ,