Bind a dropdown according to data in another drop down using traditional AJAX

Code for client side written within script:

function CallTemplate()

            {

           

              //alert(document.getElementById('cmbAssignTo_cmbSimple').value);

                   

                   var objDd=  document.getElementById('ddlmenu')

                  

                    var strValue = objDd.options[objDd.selectedIndex].value;                   

                   

                    //Create XMLHttpRequest object:'request'

                       

                        CreateXmlHttpRequestObject();

                       

                        //Build the required Query string

                        var sPass=1;

                       

                        var retrieveParam = 'id='+ strValue;

                       

                        var retrieveURL = "AJAX.aspx";

                        var url = retrieveURL + '?' + retrieveParam;

                       

                        request.open('GET',url,true);

                       

                        request.onreadystatechange = CheckTemplate;

                   

                        request.send(null);   

            }

               

            function CheckTemplate()

            {

                document.getElementById("ddlsubmenu").innerText="";

                if(request.readyState == 4 || request.readyState == 'complete')

                {

                    if(request.status == 200)

                    {   

                            var opt=document.createElement("option");

                            opt.value="-1";

                            opt.text="----select subcategory---";

                            document.getElementById("ddlsubmenu").add(opt);

                            var DdVisitTemp = document.getElementById("ddlmenu");

                           

                            var rootFile = request.responseXML.documentElement;

                         

                            var Id = rootFile.getElementsByTagName('Id');

                           

                            var Name = rootFile.getElementsByTagName('Name');

                           

                              if(Id.length > 0 || Name.length > 0)

                              {

                       

                                for(var i=0;i
                                {
                                   
                                       if(Name.length > 0)
                                       {
                                         var opt=document.createElement("option");
                                       
                                        opt.value=Id[i].text;
                                           
                                        opt.text=Name[i].text;
                                       
                                        document.getElementById("ddlsubmenu").add(opt);
                                       
                                      }
                                   
                                }
                               
                            }
                             
                    }//    inner IF       
           
            } // Outer IF
           
        }
       
        function CreateXmlHttpRequestObject()
            {
                try
                {
                    request = new XMLHttpRequest();
                }
                catch(nething)
                {
                    try
                    {
                        request = new ActiveXObject('Msxml2.XMLHTTP');
                    }
                    catch(othr)
                    {
                        try
                        {
                            request = new ActiveXObject('Microsoft.XMLHTTP');
                        }
                        catch(err)
                        {
                            request = false;
                        }
                    }
                }
                if(!request)
                {
                    alert("Error initializing XMLHttpRequest object!");
                }
            }

code for ajax page i.e ajax.aspx

private void Page_Load(object sender, System.EventArgs e)
        {
                   
                        string id=string.Empty ;
            System.Text.StringBuilder strXml;
            string passedValue = Request.QueryString["id"];

                        string strFill=" select  PK_PRIMARY_KEY,TITLE_SUBMENU from SUBJECT_SUBMENU where FK_SUBJECTMENU_ID = '" + id + "' ";
           
            DataTable dttemp= con.connectiondatatable(strFill);
           


            int j=dttemp.Rows.Count;
            strXml = new System.Text.StringBuilder ();
            strXml.Append("");
           
            if(j > 0)
            {
             
                for(int i=0 ; i
                {
                   
                    strXml.Append(""+dttemp.Rows[i]["PK_PRIMARY_KEY"].ToString() +" ");
                    strXml.Append(" "+dttemp.Rows[i]["TITLE_SUBMENU"].ToString()+" ");
                }

            }
            else
            {
               
                strXml.Insert(-1,"");
               
            }

            strXml.Append("");
            XmlDocument xTemplate = new XmlDocument();
            xTemplate.LoadXml(strXml.ToString());

            Response.ContentType = "text/xml";
            Response.CacheControl = "No-cache";
            xTemplate.Save(Response.OutputStream);
           
            // Put user code to initialize the page here
        }

There are two tables

1.SUBJECTMENU

2.SUBJECT_SUBMENU

Relation between them

SUBJECT_SUBMENU.FK_SUBJECTMENU_ID=SUBJECTMENU.PK_SUBJECTMENU_ID

Step 1:

create two tables must have relationship between them like above.

step 2:

Bind 1st dropdown on page load.

step 3:

Write code for client side as well as ajax page.

When u change 1st dropdown ,2nd dropdown will change.

How to create a ajax page:

Add a webform and delete all code that will bydefault in client except tag containing page inherit.

Example:

<%@ Page language="c#" Codebehind="AJAX.aspx.cs" AutoEventWireup="false" Inherits="KnowledgeSharing.AJAX" %>

except this one