Making three-level linkage menu with Ajax

Ajax| Menu | Linkage Menu

The entire code process is based on the client's URL request to determine which Drop-down list of selected items changed, the server calls the SQL based on the request URL The database generates the corresponding data write Tmp.xml and redirects to it. Because the XMLHttpRequest object interacts with the server, it gets response after the server code is executed, So the Tmp.xml data will be returned to the client. That's the whole code note to mind. It is noteworthy to avoid the same URL when requesting URLs, so that the data in the cache is not invoked. The general method has the settings page to close write cache switch, Set head No-cache in your program or avoid the same URL. Avoid the same URL that can be distinguished by the current time after it.

Myado: Custom ADO class. To connect to SQL Server and get data.
public class Myado
{
Public Myado ()
{
}
public static SqlConnection Con (string sqlconnectionstring)
{
SqlConnection mycon = new SqlConnection (sqlConnectionString);
return mycon;
}
public static SqlConnection Con ()
{
SqlConnection mycon = new SqlConnection ("server=.; Uid=sa;password=network;initial catalog=mydata ");
return mycon;
}
public static DataTable Gettabledata (String tablename,sqlconnection Con)
{
SqlCommand mycmd = new SqlCommand ("SELECT * from" +tablename,con);
DataTable MyTable = new DataTable ();
SqlDataAdapter myadapter = new SqlDataAdapter (myCMD);
Myadapter.fill (MyTable);
return MyTable;
}
public static DataTable Gettabledata (String commandstring)
{
SqlCommand mycmd = new SqlCommand (Commandstring,con ());
DataTable MyTable = new DataTable ();
SqlDataAdapter myadapter = new SqlDataAdapter (myCMD);
Myadapter.fill (MyTable);
return MyTable;
}
}

------------------------------------main.aspx-------------------------------------------------------------------------- -------
private void Page_Load (object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
Response.Clear ();
DataSet myds = new DataSet ();
if (Request.Url.ToString (). IndexOf ("? Part=state")!=-1)
{
MYDS.TABLES.ADD (Myado.gettabledata ("select * from area where sz_code%10000=0"));
}
else if (Request.Url.ToString (). IndexOf ("? part=city")!=-1 && Request.Url.ToString (). IndexOf ("sz_code=")!=-1)
{
String str = request.querystring["Sz_code"]. ToString ();
str = str. Substring (0,2) + "_[1-9]00";
MYDS.TABLES.ADD (Myado.gettabledata ("select * from area where Sz_code like '" +str+ "));
}
else if (Request.Url.ToString (). IndexOf ("? Part=town")!=-1 && Request.Url.ToString (). IndexOf ("sz_code=")!=-1)
{
String str = request.querystring["Sz_code"]. ToString ();
str = str. Substring (0,4) + "_[1-9]";
MYDS.TABLES.ADD (Myado.gettabledata ("select * from area where Sz_code like '" +str+ "));
}
Myds.writexml (request.physicalapplicationpath+ "Test.xml");
Response.Redirect ("test.xml?timestamp=" +request.querystring["timestamp"). ToString ());
}
//------------------------------------------------------------------------------------------------------------- ------------

<script type= "Text/javascript" ....
var xhrobject; Xmlhttpresponse objects
var Selectid; The Drop-down list ID that is currently being populated

  function Getxhrobject ()
  ... {
   var xmlobject;
   if (window. ActiveXObject)
   ... {
    xmlobject =  new ActiveXObject ("Microsoft.XMLHTTP");
  }
   else if (window. XMLHttpRequest)
   ... {
    xmlobject = new XMLHttpRequest ();
  }
   return xmlobject;
 }
 
  function MyEvent ()
  ... {
  var obj;
  var newoption;

   if (xhrobject.readystate = 4)
   ... {
    if (xhrobject.status = =)
    ... {
     obj = xhrobject.responsexml;
    
     <!--If the user changes the province option,
     if ( selectid== ' city ')
     ... {
      document.getElementById ("City"). Options.length=1;
    }
    
     <!--If the user changes the city option,
     if ( selectid== ' town ')
     ... {
      document.getElementById ("Town"). Options.length=1;
    }

For (I=0;i<obj.getelementsbytagname ("name"). length;i++)
... {
Newoption = new Option (obj.getelementsbytagname ("name") [I].childnodes[0].nodevalue,obj.getelementsbytagname ("Sz_ Code ") [I].childnodes[0].nodevalue);
document.getElementById (Selectid). Options.add (Newoption)
}

}
}

}

function Getselect (citytype)
... {
Xhrobject=getxhrobject ();
Xhrobject.onreadystatechange = MyEvent;

var querystring;
if (Citytype = = ' City ')
... {
Selectid = "City";
QueryString = document.getElementById ("select"). Value;
Xhrobject.open ("Get", "select.aspx?part=city&sz_code=" +querystring+ "&timestamp=" +new Date (). GetTime ());
}
else if (Citytype = ' town ')
... {
Selectid = "Town";
QueryString = document.getElementById ("City"). Value;
Xhrobject.open ("Get", "select.aspx?part=town&sz_code=" +querystring+ "&timestamp=" +new Date (). GetTime ());
}
else if (Citytype = = ' state ')
... {
Selectid = "Select";
Xhrobject.open ("Get", "select.aspx?part=state&timestamp=" +new Date (). GetTime ());
}

Xhrobject.send (NULL);
}
</script>

<input style= "Z-INDEX:100; left:64px; width:64px; Position:absolute; top:328px; height:22px "type=" button ">
<select id= "Town" style= "z-index:104; left:360px; width:80px; Position:absolute; top:152px ">
<option value= "District" > County </option>
</select><select id= "City" style= "z-index:103; left:272px; width:80px; Position:absolute; top:152px ">
<option value= "City" > City </option>
</select><select id= "Select" style= "Z-INDEX:101; left:144px; width:120px; Position:absolute; top:152px ">
<option value= "Provinces" > Provinces </option>
</SELECT>
County City Province