In this article I’ll explain how to populate ASP.Net DropDownList using JavaScript and AJAX. To achieve my goal I’ll make use of ASP.Net AJAX ScriptManager and PageMethods
HTML Markup
To start with I have placed a simple DropDownList in the ASP.Net Web Page
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
    </asp:ScriptManager>
    <asp:DropDownList ID="ddlCountries" runat="server">
    </asp:DropDownList>
</form>

Server Side Logic
Next you will need to create a WebMethod on the page that will handle the PageMethod calls server side.
C#
[System.Web.Services.WebMethod]
public static List<Country> GetCountries()
{
    List<Country> countries = new List<Country>();
    Country country = new Country();
 
    country.Name = "India";
    country.Id = "1";
    countries.Add(country);
 
    country = new Country();
    country.Name = "USA";
    country.Id = "2";
    countries.Add(country);
 
    country = new Country();
    country.Name = "Canada";
    country.Id = "3";
    countries.Add(country);
 
    return countries;
}

VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCountries() As List(Of Country)
        Dim countries As List(Of Country) = New List(Of Country)
 
        Dim country As New Country
        country.Name = "India"
        country.Id = "1"
        countries.Add(country)
 
        country = New Country
        country.Name = "USA"
        country.Id = "2"
        countries.Add(country)
 
        country = New Country
        country.Name = "Canada"
        country.Id = "3"
        countries.Add(country)
 
        Return countries
    End Function
End Class

The above PageMethod simply creates a list of Country object and returns the populated List back. The country business class is shown below
C#
public class Country
{
    private string _name;
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }
 
    private string _id;
    public string Id
    {
        get { return _id; }
        set { _id = value; }
    }
}

VB.Net
Public Class Country
    Private _name As String
    Public Property Name As String
        Get
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
        End Set
    End Property
 
    Private _id As String
    Public Property Id As String
        Get
            Return _id
        End Get
        Set(ByVal value As String)
            _id = value
        End Set
    End Property
End Class

That’s all you need to do server side. Now let’s move to the client side part
Client Side Logic
Below is the client side. I’ll explain each JavaScript method one by one
<script type = "text/javascript">
var ddlCountries;
function GetCountries() {
    ddlCountries = document.getElementById("<%=ddlCountries.ClientID %>");
    ddlCountries.options.length == 0;
    AddOption("Loading", "0");
    PageMethods.GetCountries(OnSuccess);
}
window.onload = GetCountries;
 
function OnSuccess(response) {
    ddlCountries.options.length = 0;
    AddOption("Please select", "0");
    for (var i in response) {
        AddOption(response[i].Name, response[i].value);
    }
}
function AddOption(text, value) {
    var option = document.createElement('option');
    option.value = value;
    option.innerHTML = text;
    ddlCountries.options.add(option);
}
</script>

Method GetCountries()
This method is called as soon as the page is loaded in client’s browser. It clears the DropDownList and adds a Loading option to it to notify the users that the data is being loaded. Then it makes an AJAX call to the GetCountries WebMethod server side using ASP.Net AJAX PageMethods.
Method OnSuccess()
This method handles the response of the ASP.Net AJAX PageMethod after the server side WebMethod returns the data. It simply clears the ASP.Net DropDownList and then adds a “Please Select” option to it and then loops through the Countries List and adds the options to the DropDownList.
Method AddOption()
Finally this method as the name suggests adds options to the ASP.Net DropDownList.

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

Downloads

With this we come to the end of this article. You can download the complete source code in C# and VB.Net using the download link below.

PopulateDropDownListJavaScript.zip