Ajax perfectly solves the onchange problem of drop-down boxes

Time:2021-12-4

That is, when the onchange event of the region drop-down box is triggered, the agent drop-down box options are changed accordingly. For example, if the region HuNan > Changsha is selected, only the agents in Changsha will be displayed in the agent drop-down box.

I thought it was easy to implement, but I found a lot of problems when I actually changed it. The main problem is that the original regional linkage is implemented in JS, and its data source is an XML file. Of course, if the drop-down box is a server-side control, the problem is easy to solve. Now it is an HTML control. It seems that it is really difficult to change at once, and it is not ideal to think of several ways to implement it, Finally, the problem can be solved only by turning to Ajax. Now think about it carefully. It seems that this situation can be solved only by Ajax. If you submit to the background in the onchange event of the regional drop-down box and pass the ID of the regional drop-down box, the generated postback will actually reinitialize the regional linkage drop-down box.

Now let me talk specifically about the process of this Ajax implementation.
First, of course, the page needs to define an HTML control with a drop-down box.

Copy codeThe code is as follows:
<select name=”Agent”></select>

Next, of course, is to define the XMLHttpRequest object.

Copy codeThe code is as follows:
var xmlhttp;
function CreateXmlHttp()
{

//Create XMLHttpRequest object for non IE browser
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//Create XMLHttpRequest object in IE browser
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e)
{
try{
xmlhttp=new ActiveXObject(“msxml2.XMLHTTP”);
}
catch(ex){}
}
}
}

This is explained in many blog articles, so I won’t say more.
Next, of course, the object is used to send conditions, obtain data, and bind the obtained data to the agent drop-down box.
Trigger the function ajaxsend() in the onchange event of the region drop-down box;

Copy codeThe code is as follows:
function AjaxSend()
{
//Create XMLHttpRequest object
CreateXmlHttp();
if(!xmlhttp)
{
Alert (“exception occurred while creating XMLHttpRequest!”);
return false;
}
//Get the value 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 send, userajax, I specifically use to get 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 box
document.getElementById(“agent”).options.length=0;
//STR is a string returned in the form of “0001 / agent 10002 / agent 20003 / agent 3”
var str=xmlhttp.responseText;
//Split the string into an array
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 binding 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();
}

In addition, by the way, after receiving the region number, userajax obtains the data return string.

Copy codeThe code is as follows:
string Area = Request.QueryString[“area”].ToString();
Datatable data = “generating a DataTable involves the company’s core code, which is 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, a thorny problem can be perfectly solved with Ajax, and it will not lead to the initialization of the drop-down box and the change of options due to sending back to the background. Dear friends, after reading this example, do you also have a good understanding of Ajax
Better understanding?

Recommended Today

Hive built-in function summary

1. Related help operation functions View built-in functions: Show functions; Display function details: desc function ABS; Display function extension information: desc function extended concat; 2. Learn the ultimate mental method of built-in function Step 1: carefully read all the functions of the show functions command to establish an overall understanding and impression Step 2: use […]