2011-01-25 18 views
0

ここでは2つのリストボックスがあります。追加ボタンをクリックすると、項目はasp.netの2番目のリストボックスに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

+0

Move_Elements()で何をしようとしていますか?そうではありません。 – Pradeep

答えて

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-engineはサーバ側のselectedValueをこれはビューステートにこれらの項目がないためです。

+0

ここでは、「Microsoft JScriptランタイムエラー:オブジェクトが期待されました」というようになっています。 –

+0

@enjoyprogramming:まだこの例外が発生していますか? –

+0

正しいIDを取得するために '<%= this.lstbx1.ClientID%> 'を使用しなければならないので、この例外はまだ –

0

すべての項目は、項目を選択している?

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

+0

- これは動作しません。 –

+0

okです。 ..私はasp.netについて知りません。私はちょうどこれを行うためにjqueryの方法を言っています...それは正しいIDについて考えることが彼の仕事ですが、私はあなたの答えをあなたに投票している。 :) – Vivek

+0

'正しいIDを取得する 'の文章を追加してください - あなたの解答が無効になるまで - 申し訳ありません!あなたのjquery-partは正しかった、確かに! –

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;" /> 
関連する問題