Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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: ,
Posted on Tuesday, June 23, 2009 4:59 AM ASP.NET , JavaScript | Back to top


Comments on this post: Moving ListItems between Two ListBox – Client Side Approach

# re: Moving ListItems between Two ListBox – Client Side Approach
Requesting Gravatar...
your same example but with jquery:

list1 and list2 become
var list1 = $("#" + '<%= ListBox1.ClientID %>');
var list2 = $("#" + '<%= ListBox2.ClientID %>');

and MoveItems becomes
function MoveItems(listFrom, listTo, isAll) {
if (isAll) {
listFrom.find("option").remove().appendTo(listTo);
}
else {
listFrom.find("option:selected").remove().appendTo(listTo);
}
}
Left by adam on Jun 23, 2009 10:30 AM

# re: Moving ListItems between Two ListBox – Client Side Approach
Requesting Gravatar...
Very good. Thanks!
Left by George on Jun 28, 2009 2:09 PM

# re: Moving ListItems between Two ListBox – Client Side Approach
Requesting Gravatar...
Excellent. It simple work copy and paste.
Left by Faheem Ahmad on Sep 15, 2011 4:25 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net