Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use ajax to solve the onchange problem of the drop-down box. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

That is, when the onchange event of the regional drop-down box is triggered, the agent's drop-down box options also change accordingly, such as selecting the region Hunan-> Changsha, then the agent drop-down box only shows the agents of Changsha.

Originally thought that this is very easy to implement, but actually found that there are a lot of problems, the main problem is that the original regional linkage is implemented in js, its data source is a xml file, of course, if the drop-down box is a server-side control, then the problem is very easy to solve, now the html control suddenly seems to be some difficult to change, think of several ways to achieve are not ideal Finally, the idea will be turned to ajax to achieve the problem can be easily solved, now think carefully, like this situation seems to be better solved only with ajax, if it is in the onchange event of the regional drop-down box for a submission to the background, the id of the regional drop-down box will actually reinitialize the regional linkage drop-down box.

Now I'm going to talk specifically about the process of implementing ajax.

First, of course, the page needs to define a html control with a drop-down box.

The copy code is as follows:

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

The copy code is as follows:

Var xmlhttp

Function CreateXmlHttp ()

{

/ / non-IE browsers create XmlHttpRequest objects

If (window.XmlHttpRequest)

{

Xmlhttp=new XmlHttpRequest ()

}

/ / IE browser creates XmlHttpRequest object

If (window.ActiveXObject)

{

Try

{

Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")

}

Catch (e)

{

Try {

Xmlhttp=new ActiveXObject ("msxml2.XMLHTTP")

}

Catch (ex) {}

}

}

}

This has been discussed in many of my blog articles, so I won't say much about it.

The next step, of course, is to use the object to send the condition, get the data, and bind the obtained data to the drop-down box agent.

Trigger the function AjaxSend () in the onchange event of the region drop-down box

The copy code is as follows:

Function AjaxSend ()

{

/ / create a XmlHttpRequest object

CreateXmlHttp ()

If (! xmlhttp)

{

Alert ("exception occurred while creating xmlhttpRequest!")

Return false

}

/ / get the value of the region drop-down box and send it as a condition

Var ss=document.getElementById ("a2"). Value.substring (0meme 4)

}

/ / the url,UserAjax to be sent is specially used 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 box

Document.getElementById ("agent"). Options.length=0

/ / str is a returned string in the form of "0001 / agent 1jm 0002 / agent 2jue 0003 / 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 iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.