2011-01-25 28 views
0

这里我有2个列表框,当我点击添加按钮,然后项目应该添加到asp.net中使用jQuery的第二个列表框。这段代码有什么问题?

<%@ 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> 
+0

所有项目选定的项目? – Vivek 2011-01-25 08:46:07

+0

你想在Move_Elements()中做什么?这是不正确的。 – Pradeep 2011-01-25 08:48:39

回答

4
<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

编辑:
反正,我只是想提醒你,你是不是能够访问代码隐藏的物品,因为这些都是在视图状态序列化并不从实际呈现的控件中取出。
因此:如果您在javascript中添加了n个项目,并且在UI中将这些新增项目中的一个选为selectedItem,则asp.net引擎将无法将服务器端的selectedValue映射到框,因为它在视图状态中没有这些项目!

+0

这里得到了一个像“Microsoft JScript运行时错误:对象预计”。请你帮我吗? – 2011-01-25 12:44:03

0

试试这个...

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

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