Chargement de la liste déroulante avec jQuery

Est-il possible de charger une liste déroulante dans asp.NET juste au moment où l'utilisateur clique sur DropDownList pour la première fois?Chargement de la liste déroulante avec jQuery

Je vais essayer de l'expliquer. J'ai une page aspx avec un DropDownList avec un élément. Je souhaite charger toutes les données dans DropDownList lorsque l'utilisateur clique sur DropDownList. C'est parce que la liste déroulante a beaucoup de données et la charge de la page est très lente.

des idées? thx à l'avance

Source

2011-05-24 user468891

Vous pouvez utiliser PageMethods à la place.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Services; 
public partial class _Default : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 


    } 

    [WebMethod] 
    public static Dictionary<string, string> getItems() 
    { 
     return new Dictionary<string, string>(){ 
      {"1","Item1"} ,{"2","Item2"}}; 
    } 
}

ASPX

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>jQuery to call page methods in ASP.NET</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
</head> 
<body> 
    <form id="Form1" runat="server"> 
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('select#<%= DropDownList1.ClientID %>').click(function() { 

       if (this.options.length <= 0) { 
        PageMethods.getItems(function(res) { 
         //alert('e'); 
         for (r in res) { 
          //$(this).append($('<option value="'+ r+'">' + res[r] + '</option>')); 
          //$(this).append($('<option></option>')); 
          $('select#<%= DropDownList1.ClientID %>').append($('<option></option>').val(r).html(res[r])); 
         } 
        }); 
       } 
      }); 
     }); 
    </script> 
    <asp:DropDownList ID="DropDownList1" runat="server" /> 
    </form> 
</body> 
</html>

Source

2011-05-24 10:12:18 Sreekumar

utilisation jquery load

$("select#theDropdownID").click(function(){ 
    $(this).load("thedropdownItems.html"); 
});

Et thedropdownItems.html

<option value='foo'>foo</option> 
<option value='bar'>bar</option> 
....

Source

2011-05-24 09:14:21

Chargement de la liste déroulante avec jQuery

Répondre

Questions connexes