2011-01-25 6 views
0

Ici, j'ai 2 zones de liste, lorsque je clique sur le bouton ajouter, les éléments doivent être ajoutés à la deuxième zone de liste dans asp.net en utilisant jquery.Quel est le problème dans ce code?

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

tous les éléments sont l'élément sélectionné? – Vivek

+0

Qu'essayez-vous de faire dans Move_Elements()? Ce n'est pas tout à fait correct. – Pradeep

Répondre

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

modifier:
De toute façon, je veux juste vous avertir, que vous n'êtes pas en mesure d'accéder aux éléments dans le code-behind, car ceux-ci sont sérialisés dans viewstate et ne sont pas extraits du contrôle rendu réel. Par conséquent: si vous ajoutez n éléments avec javascript et que l'un de ces éléments nouvellement ajoutés est selectedItem dans l'interface utilisateur, le moteur ASP.net ne parviendra pas à mapper le selectedValue au niveau du serveur sur un élément de l'interface utilisateur. boîte, car il n'a pas ces éléments dans le viewstate!

+0

voici un "erreur d'exécution Microsoft JScript: Objet attendu". Pourriez-vous m'aider s'il vous plaît? –

+0

@enjoyprogramming: obtient toujours cette exception? –

+0

Yah reçois toujours cette exception –

0

essayer ...

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

+0

-, ce travail de wont't, parce que vous devez utiliser '<% = this.lstbx1.ClientID%>' pour obtenir l'ID correct (ce qui est asp.net spécifique!) –

+0

ok. ..Je ne sais pas asp.net..i suis juste raconter une façon jquery de le faire ... il est son travail de penser à id correct mais j'ai voté en vous pour votre réponse. :) – Vivek

+0

vous devriez ajouter une phrase pour 'obtenir des ID correctes - jusqu'à ce que votre solution est invalide - désolé pal! mais votre part est exacte, en effet! Alors que –

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