Question

这里我有2个列表框，当我点击添加按钮时，应该使用jquery将项目添加到asp.net的第二个列表框中。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListBoxExample.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>

Answer 1

<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

修改
无论如何，我只是想警告你，你无法访问代码隐藏中的项目，因为它们在viewstate中被序列化，而不是从实际的渲染控件中获取。
因此：如果您使用javascript添加n个项目并在ui中将这些新添加的项目之一选为selectedItem，那么asp.net-engine将无法在服务器上映射selectedValue - 一边是框的一个项目，因为它在viewstate中没有这些项目！

Answer 2

试试这个......

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

Answer 3

<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;" />

这段代码有什么问题？

3 个答案: