What wrong in this code? [closed]_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-06 08:16 出处：网络

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time,or an extraordinarily narrow situation that is not generally applic

相关专题：asp.net jquery

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

Here i have 2 list boxes ,when i click add button then items should be added to second list box in asp.net using jquery.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListBoxExa开发者_如何学Gomple.aspx.cs" Inherits="ListBoxExample" %>

<!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>Adding,removing elements from First Listbox to Second Listbox</title>
    <style type="text/css">
        .lstbx1
        {
            font-family: Verdana;
            font-size: medium;
            font-style: normal;
            background-color: Aqua;
            height: auto;
            width: auto;
        }
        .lstbx2
        {
            font-family: Verdana;
            font-size: medium;
            font-style: normal;
            background-color: Lime;
            height: auto;
            width: auto;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" />
    <script type="text/javascript">
        function Move_Elements() {
            $("#lstbx1").appendTo("#lstbx2");
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <asp:ListBox ID="lstbx1" runat="server" CssClass="lstbx1" SelectionMode="Multiple">
                        <asp:ListItem>One</asp:ListItem>
                        <asp:ListItem>Two</asp:ListItem>
                        <asp:ListItem>Three</asp:ListItem>
                        <asp:ListItem>Four</asp:ListItem>
                        <asp:ListItem>Five</asp:ListItem>
                        <asp:ListItem>Six</asp:ListItem>
                        <asp:ListItem>Seven</asp:ListItem>
                    </asp:ListBox>
                </td>
                <td>
                    <asp:ListBox ID="lstbx2" runat="server" CssClass="lstbx2"></asp:ListBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();" />
                </td>
                <td>
                    <asp:Button ID="btnremove" runat="server" Text="Remove" OnClientClick="" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    function Move_Elements() {
        var originalList = $("#<%= this.lstbx1.ClientID %>");
        var items = $('option', originalList);
        var targetList = $("#<%= this.lstbx2.ClientID %>");
        items/*.clone()*/.appendTo(targetList);
    }

</script>

working example

edit:
anyway, i just want to warn you, that you are not able to access the items in code-behind, because these are serialized in viewstate and are not taken from the actual rendered control.
as a result: if you add n items with javascript and have one of these newly-added items selected as selectedItem in the ui, the asp.net-engine will fail to map the selectedValue at server-side to an item of the box, because it does not have these items in the viewstate!

try this...

<script type="text/javascript">
function Move_Elements() {
   $('select[id=lstbx1] option').appendTo('#List2');
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" ></script>
<script type="text/javascript">
    function Move_Elements() {
        $(".lstbx1").children().appendTo(".lstbx2");
    }
</script>
...
<asp:Button ID="btnadd" runat="server" Text="Add" OnClientClick="Move_Elements();return false;" />