Ajax perfect solution to the onchange problem of the dropdown box _ajax related

That is, in the Trigger Area dropdown box onchange event, the agent's dropdown box options are also corresponding changes, such as the choice of the area of Hunan-〉 Changsha, then the agent dropdown box only shows the agents of Changsha.

Originally thought that this is a good implementation, but actually changed to find a lot of problems, the main problem is that the original regional linkage is implemented with JS, its data source is an XML file, of course, if the dropdown box is a server-side control so the problem is very good to solve, now is the HTML control seems to be really some bad change, Think of several ways to achieve is not ideal, and finally turn the idea to use Ajax to realize the problem to solve, now carefully think, like this situation seems only with Ajax can be a better solution, if it is in the area of the onchange event in the background to submit to the backstage, If you pass the ID of the area dropdown box, the resulting postback will reinitialize the area linkage drop-down box.

Now I'm going to talk specifically about this AJAX implementation process.
The first page of course needs to define an HTML control for a Drop-down box.

Copy Code code as follows:

<select id= "Agent" name= "Agent" ></select>

The next step, of course, is to define the XMLHttpRequest object.

Copy Code code as follows:

var xmlhttp;
function Createxmlhttp ()
{

Non IE browser Create XMLHttpRequest object
if (window. XMLHttpRequest)
{
Xmlhttp=new XMLHttpRequest ();
}
IE Browser Create XMLHttpRequest object
if (window. ActiveXObject)
{
Try
{
Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (E)
{
try{
Xmlhttp=new ActiveXObject ("MSXML2"). XMLHTTP ");
}
catch (ex) {}
}
}
}

This in my many blog articles have elaborated, do not say more.
The next step, of course, is to use the object to send the condition, get the data, and bind the obtained data to the agent's Drop-down box.
The onchange event inside the area dropdown box triggers the function ajaxsend ();

Copy Code code as follows:

function Ajaxsend ()
{
Creating XMLHttpRequest Objects
Createxmlhttp ();
if (!xmlhttp)
{
Alert ("Create XMLHttpRequest exception!") ");
return false;
}
Gets the value value of the Region Drop-down box, which is sent as a condition
var Ss=document.getelementbyid ("A2"). Value.substring (0,4);
}
Url,userajax to send I'm dedicated to fetching data.
Url= "Userajax.aspx?area=" +SS;
Xmlhttp.open ("POST", Url,false);

Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4)
{
if (xmlhttp.status==200)
{
Empty the original dropdown box
document.getElementById ("Agent"). options.length=0;
STR is returned as a string, in the form of "0001/Agent 1,0002/Agent 2,0003/Agent 3"
var Str=xmlhttp.responsetext;
Splits the string into an array form
var strs=str.split (",");
document.getElementById ("Agent"). Options.add (New Option ("----------", "000000"));
for (Var i=0;i<strs.length-1;i++)
{
Get Value (number)
var a=strs[i].substring (0,strs[i].lastindexof ("/"));
Get bound content
var b=strs[i].substring (Strs[i].lastindexof ("/") +1,strs.length);
Bind to drop down box
document.getElementById ("Agent"). Options.add (New Option (B,a));
}
}
}
}
Xmlhttp.send ();
}

Also, incidentally, the process by which Userajax receives the data return string after receiving the region number.

Copy Code code as follows:

String area = request.querystring[' Area ']. ToString ();
DataTable data = "Generate a DataTable, involving the company's core code, omitting"
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, a more difficult problem with Ajax to achieve a perfect solution, and will not be due to the background postback caused by the dropdown box initialization, resulting in options change, dear friends, see this example, you have Ajax
A better understanding?