Ajax perfectly solves the onchange problem in the drop-down box

That is, when the onchange event in the regional drop-down box is triggered, the options of the agent drop-down box are changed accordingly. For example, if you select Hunan> Changsha, the agent drop-down box only displays the agent in Changsha.

I thought this was a good implementation, but I found a lot of problems during the actual change. The main problem is that the original regional linkage was implemented using js, and its data source was an xml file, of course, if the drop-down box is a server-side control, the problem is well solved. Now, the html control suddenly seems to be a little difficult to change, and it is not ideal to come up with several methods, finally, we can solve the problem by turning our thinking to ajax. Now we think about it carefully. In this case, it seems that only ajax can be better solved, if a request is submitted to the background in the onchange event in the region drop-down box and the region drop-down box id is passed in, the actually generated response will reinitialize the region linked drop-down box.

Now I will talk about the ajax implementation process in detail.
First, you must define an html control in the drop-down box.
Copy codeThe Code is as follows:
<Select id = "Agent" name = "Agent"> </select>

Next, define the XmlHttpRequest object.
Copy codeThe Code is as follows:
Var xmlhttp;
Function CreateXmlHttp ()
{

// Create an XmlHttpRequest object in a non-IE browser
If (window. XmlHttpRequest)
{
Xmlhttp = new XmlHttpRequest ();
}
// Create an XmlHttpRequest object in IE
If (window. ActiveXObject)
{
Try
{
Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Catch (e)
{
Try {
Xmlhttp = new ActiveXObject ("msxml2.XMLHTTP ");
}
Catch (ex ){}
}
}
}

I have explained this in many of my blog articles.
The next step is to use this object to send conditions, obtain data, and bind the obtained data to the agent drop-down box.
Triggers the AjaxSend () function in the onchange event in the region drop-down box ();

Copy codeThe Code is as follows:
Function AjaxSend ()
{
// Create an XmlHttpRequest object
CreateXmlHttp ();
If (! Xmlhttp)
{
Alert ("an exception occurred when creating xmlhttpRequest! ");
Return false;
}
// Obtain the value of the region drop-down box and send it as a condition
Var ss = document. getElementById ("a2"). value. substring (0, 4 );
}
// The url to be sent. I use UserAjax to retrieve data.
Url = "UserAjax. aspx? Area = "+ ss;
Xmlhttp. open ("POST", url, false );

Xmlhttp. onreadystatechange = function ()
{
If (xmlhttp. readyState = 4)
{
If (xmlhttp. status = 200)
{
// Clear the original drop-down list
Document. getElementById ("agent"). options. length = 0;
// Str is the returned string in the format of "0001/agent 3"
Var str = xmlhttp. responseText;
// Splits the string into arrays.
Var strs = str. split (",");
Document. getElementById ("agent"). options. add (new Option ("----------", "000000 "));
For (var I = 0; I <strs. length-1; I ++)
{
// Obtain the value (number)
Var a = strs [I]. substring (0, strs [I]. lastIndexOf ("/"));
// Obtain the bound content
Var B = strs [I]. substring (strs [I]. lastIndexOf ("/") + 1, strs. length );
// Bind to the drop-down list
Document. getElementById ("agent"). options. add (new Option (B, ));
}
}
}
}
Xmlhttp. send ();
}

In addition, we will introduce the process of getting data and returning strings after UserAjax receives the region number.
Copy codeThe Code is as follows:
String Area = Request. QueryString ["area"]. ToString ();
DataTable data = "generating DataTable, involving the company's core code, omitted"
String aa = "";
For (int I = 0; I <data. Rows. Count; I ++)
{
If (aa = "")
{
Aa = data. Rows [I] ["id"]. ToString () + "/" + data. Rows [I] ["name"]. ToString ();
}
Else
{
Aa = aa + "," + data. rows [I] ["id"]. toString () + "/" + data. rows [I] ["name"]. toString ();
}
}
Response. Write (aa );

In this way, ajax is used to solve a difficult problem and will not lead to the initialization of the drop-down box due to sending back to the background, resulting in option changes. Dear friend, I have read this example, do you have ajax?
What about better understanding?