Pass items from one ListBox to another with Add all and Remove all in ASP.Net using jQuery

Here I have created sample that will help you out.

HTML

<div>
    <div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document.getElementById('<%= Add.ClientID %>')).click(
                // Add one
        function (e) {
            var selectedOpts = $(document.getElementById('<%= lstLeft.ClientID %>')).find(':selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            } else {
                $($(document.getElementById('<%= lstLeft.ClientID %>'))).find(':selected').appendTo($(document.getElementById('<%= lstRight.ClientID %>')));

                e.preventDefault();
            }
        });
                // Add all
                $(document.getElementById('<%= AddAll.ClientID %>')).click(
        function (e) {
            $($(document.getElementById('<%= lstLeft.ClientID %>'))).children().appendTo($(document.getElementById('<%= lstRight.ClientID %>')));
            e.preventDefault();
        });

                // remove one
                $(document.getElementById('<%= Remove.ClientID %>')).click(
        function (e) {
            var selectedOpts = $(document.getElementById('<%= lstRight.ClientID %>')).find(':selected');
            if (selectedOpts.length == 0) {
                alert("Nothing to move.");
                e.preventDefault();
            } else {
                $($(document.getElementById('<%= lstRight.ClientID %>'))).find(':selected').appendTo($(document.getElementById('<%= lstLeft.ClientID %>')));

                e.preventDefault();
            }
        });
                // remove all;
                $(document.getElementById('<%= RemoveAll.ClientID %>')).click(
        function (e) {
            $($(document.getElementById('<%= lstRight.ClientID %>'))).children().appendTo($(document.getElementById('<%= lstLeft.ClientID %>')));
            e.preventDefault();
        });
            });

            $(function () {
                $("[id*=btnSubmit]").bind("click", function () {
                    var selectedItems = [];
                    $("#<%=lstRight.ClientID %> option").each(function () {
                        selectedItems.push($(this).text() + " : " + $(this).val());
                    });
                    $('[id*=hfSelectedValue]').val(selectedItems.join(','));
                });
            });       
        </script>
        <table>
            <tr>
                <td style="width: 300px;">
                    <asp:ListBox ID="lstLeft" runat="server" Rows="15" Width="250px" SelectionMode="Multiple">
                        <asp:ListItem Text="Apple" Value="Apple" />
                        <asp:ListItem Text="Mango" Value="Mango" />
                        <asp:ListItem Text="Grapes" Value="Grapes" />
                        <asp:ListItem Text="Pineapple" Value="Pineapple" />
                        <asp:ListItem Text="Guava" Value="Guava" />
                        <asp:ListItem Text="Cherry" Value="Cherry" />
                        <asp:ListItem Text="Banana" Value="Banana" />
                        <asp:ListItem Text="Papaya" Value="Papaya" />
                    </asp:ListBox>
                </td>
                <td align="center" valign="middle">
                    <asp:Button ID="Add" runat="server" Text="Add" />
                    <br />
                    <br />
                    <asp:Button ID="Remove" runat="server" Text="Remove" /><br />
                    <br />
                    <br />
                    <br />
                    <asp:Button ID="AddAll" runat="Server" Text="Add All" /><br />
                    <br />
                    <asp:Button ID="RemoveAll" runat="server" Text="Remove All" /><br />
                </td>
                <td>
                    <asp:ListBox ID="lstRight" runat="server" Rows="15" Width="250px" SelectionMode="Multiple"
                        CausesValidation="false"></asp:ListBox>
                </td>
            </tr>
        </table>
    </div>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSave_Click" />
    <asp:HiddenField ID="hfSelectedValue" runat="server" />
    <br />
    <br />
    <asp:GridView ID="gvSelectedData" runat="server" AutoGenerateColumns="true" />
</div>

C#

protected void btnSave_Click(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(hfSelectedValue.Value))
    {
        var selectedData = (from item in hfSelectedValue.Value.Split(',')
                            select item.Split(':') into items
                            select new
                            {
                                Text = items[0],
                                Value = items[1]
                            });
        gvSelectedData.DataSource = selectedData.ToArray();
        gvSelectedData.DataBind();
    }
}

Screenshot