Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to create DropDownList and populate items using JQuery in ASP.NET

Author: Rachel Nicole
Download Source Code : 1362_DropDownListUsingJQuery.zip

In this article, I will try to show you jQuery feature of creating and populating DropDownList in ASP.NET. We will also see how we can populate DropDownList from a WebMethod using jQuery.

 

 

You can create DropDownList dynamically in client side code using jQuery and populate this DropDownList with items in the same code. If the DropDownList is already created, you can also populate it using jQuery but you have to declare your method as WebMethod to populate it using jQuery.
 
Let’s use jQuery to Create DropDownList and to populate it. 
 
  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C#  > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and include below file in this folder.

    Jquery-1.4.1.min.js
     
  6. Add a <script> tag in between <head> tag of Default.aspx page. You have to give reference for jQuery as below. 

    <head runat="server">
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>    
    </head>
     
  7. Add another <script> tag in between <head> tag and write code below in it.

    <script type="text/javascript">
       $(document).ready(function () {
     
            var names = { 'name1': 'Micheal', 'name2': 'Amanda', 'name3': 'kelly', 'name4': 'Steven', 'name5': 'Martin' };
            var b = $('<select />');
            for (var name in names) {
                $('<option />', { value: name, text: names[name] }).appendTo(b);
            }
            b.appendTo('body');
     
            var cities = { 'city1': 'Chicago', 'city2': 'Boston', 'city3': 'New York', 'city4': 'Los Angeles', 'city5': 'Miami' };
            var a = $('<select />');
            for (var city in cities) {
                $('<option />', { value: city, text: cities[city] }).appendTo(a);
            }
            a.appendTo('body');
        });
    </script>
     
    DropDownList is created using $('<select />') script and options are added into DropDownList using $('<option />', { value: name, text: names[name] }).appendTo(b);  script. This DropDownList is added to body of the page using appendTo() function.

     
  8. Add a function in your code behind file

    C#
     
    using System.Web.Services;
    using System.Collections;
     
    [WebMethod]
    public static ArrayList GetNames()
    {
        ArrayList array = new ArrayList();
        array.Add("Micheal");
        array.Add("Amanda");
        array.Add("Kelly");
        return array;
    }
     
    VB.NET

    Imports System.Web.Services
    Imports System.Collections
     
    <WebMethod()> _
    Public Shared Function GetNames() As ArrayList
        Dim array As New ArrayList()
        array.Add("Micheal")
        array.Add("Amanda")
        array.Add("Kelly")
        Return array
    End Function
     
    I have created a function GetNames() which returns ArrayList. This function is created as WebMethod. 
  9. Add a DropDownList in Default.aspx page

    <asp:DropDownList ID="ddlNames" runat="server">
    </asp:DropDownList>
     
  10. Add another <script> tag in between <head> tag and write code below in it.

    <script type="text/javascript">
        $().ready(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetNames",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (a) {
                    $("#ddlNames").get(0).options.length = 0;
                    $("#ddlNames").get(0).options[0] = new Option("Select Name", "-1");
     
                    $.each(a.d, function (index, item) {
                            $("#ddlNames").get(0).options[$("#ddlNames").get(0).options.length] = new Option(item);
                    });
                }
            });
        });
    </script>
     
    In above script, I have accessed GetName() function and added ArrayList values to DropDownList.  
  11. Build website and see in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to create XML file and insert data using ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net