Click here to Skip to main content
11,932,461 members (58,001 online)
Click here to Skip to main content
Articles » Web Development » Ajax » General » Downloads

Tagged as


110 bookmarked

AJAX for Beginners (Part 2) - Using XMLHttpRequest and jQuery AJAX to implement a cascading dropdown

, 14 Jan 2013 CPOL
This article talks about using XMLHttpReqqest and jQuery AJAX in ASP.NET applications.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<head runat="server">
    <title>Ajax - XMLHttpRequest Powered Cascaded drop down list</title>
    <script type="text/javascript">
    var xmlHttp;
    function UpdateCountries()
        //Let us create the XML http object
        xmlHttp = null;
            //for new browsers
            xmlHttp = new XMLHttpRequest();
        else if(window.ActiveXObject)
            //for old ones
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        if(xmlHttp != null)
            //eveyhthing so far is just fine, lets proceed
            //Retreive the value of the first drop down list
            var contName = document.getElementById('<%=drpContinent.ClientID %>').value; 
            //Handle the response of this async request we just made(subscribe to callback)
            //Pass the value to a web page on server as query string using XMLHttpObject.
    //Handle the response of this async request
    function state_Change() 
        if (xmlHttp.readyState==4) 
            // 4 = “loaded” 
            if (xmlHttp.status==200) 
                //request was successful. so Retrieve the values in the response.
                var countries = xmlHttp.responseText.split(';');
                var length = countries.length;
                //Change the second dropdownlists items as per the new values foudn in response.
                //let us remove existing items
                document.getElementById('<%=drpCountry.ClientID %>').options.length = 0;
                //Now add the new items to the dropdown.
                var dropDown = document.getElementById('<%=drpCountry.ClientID %>');                                
                for(var i = 0; i < length - 1; ++i)
                    var option = document.createElement("option");
                    option.text = countries[i];
                    option.value = countries[i];
    <form id="form1" runat="server">
        Select Continent:
            <asp:DropDownList ID="drpContinent" runat="server" onchange="UpdateCountries();">
            </asp:DropDownList><br />
            <br />
            Select Country: &nbsp;
            <asp:DropDownList ID="drpCountry" runat="server">

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rahul Rajat Singh
India India
I Started my Programming career with C++. Later got a chance to develop Windows Form applications using C#. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce/e-governance Portals and Data driven websites.

My interests involves Programming, Website development and Learning/Teaching subjects related to Computer Science/Information Systems. IMO, C# is the best programming language and I love working with C# and other Microsoft Technologies.
  • Microsoft Certified Technology Specialist (MCTS): Web Applications Development with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Accessing Data with Microsoft .NET Framework 4
  • Microsoft Certified Technology Specialist (MCTS): Windows Communication Foundation Development with Microsoft .NET Framework 4

If you like my articles, please visit my website for more:[^]

  • Microsoft MVP 2015

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 14 Jan 2013
Article Copyright 2012 by Rahul Rajat Singh
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid