Move ListBox items to another ListBox on Cilck using jQuery in ASP.Net

Hi Corobori,

Check this example. Now please take its reference and correct your code.

HTML

<table>
    <tr>
        <td>
            <asp:ListBox ID="lstLeft" runat="server" SelectionMode="Multiple" Width="80" Height="130">
                <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>
            <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="80" Height="130"></asp:ListBox>
        </td>
    </tr>
</table>
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="OnSubmit" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#lstLeft").on("click", function () {
            var options = $("[id*=lstLeft] option:selected");
             var opt = $(options).clone();
             $(options).remove();
             $("[id*=lstRight]").append(opt);
        });

        $("#lstRight").on("click", function () {
            var options = $("[id*=lstRight] option:selected");
            var opt = $(options).clone();
            $(options).remove();
            $("[id*=lstLeft]").append(opt);
        });

        $("[id*=btnSubmit]").on("click", function () {
            $("[id*=lstLeft] option").attr("selected", "selected");
            $("[id*=lstRight] option").attr("selected", "selected");
        });
    });
</script>

Code

C#

protected void OnSubmit(object sender, EventArgs e)
{
    string leftSelectedItems = Request.Form[lstLeft.UniqueID];
    lstLeft.Items.Clear();
    if (!string.IsNullOrEmpty(leftSelectedItems))
    {
        foreach (string item in leftSelectedItems.Split(','))
        {
            lstLeft.Items.Add(item);
        }
    }
    string rightSelectedItems = Request.Form[lstRight.UniqueID];
    lstRight.Items.Clear();
    if (!string.IsNullOrEmpty(rightSelectedItems))
    {
        foreach (string item in rightSelectedItems.Split(','))
        {
            lstRight.Items.Add(item);
        }
    }
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Left ListBox Items: " + leftSelectedItems + "\\nRight ListBox Items: " + rightSelectedItems + "');", true);
}

VB.Net

Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
    Dim leftSelectedItems As String = Request.Form(lstLeft.UniqueID)
    lstLeft.Items.Clear()
    If Not String.IsNullOrEmpty(leftSelectedItems) Then
        For Each item As String In leftSelectedItems.Split(","c)
            lstLeft.Items.Add(item)
        Next
    End If

    Dim rightSelectedItems As String = Request.Form(lstRight.UniqueID)
    lstRight.Items.Clear()
    If Not String.IsNullOrEmpty(rightSelectedItems) Then
        For Each item As String In rightSelectedItems.Split(","c)
            lstRight.Items.Add(item)
        Next
    End If

    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Left ListBox Items: " & leftSelectedItems & "\nRight ListBox Items: " & rightSelectedItems & "');", True)
End Sub

Screenshot