A self-written Ajax drop-down box Group

The code is really not very good. It is not very good to read it, and then get rid of it. Please note the original post, thank you.

Ajax saves system resources, because it is better than repeated dB requests.

This still has a Web-service, but for personal reasons, only the example of reading XML is released.

XML section:

<? XML version = "1.0" encoding = "UTF-8"?>

-<Root> -<Local>  <ID> 1</ID>  <Name> Guangdong</Name>  <Parent> 0</Parent>  </Local> -<Local>  <ID> 2</ID>  <Name> Fujian</Name>  <Parent> 0</Parent>  </Local> -<Local>  <ID> 3</ID>  <Name> Guangzhou</Name>  <Parent> 1</Parent>  </Local> -<Local>  <ID> 4</ID>  <Name> Fuzhou</Name>  <Parent> 2</Parent>  </Local> -<Local>  <ID> 5</ID>  <Name> Dongshan District</Name>  <Parent> 3</Parent>  </Local> -<Local>  <ID> 6</ID>  <Name> Yuexiu District</Name>  <Parent> 3</Parent>  </Local> -<Local>  <ID> 7</ID>  <Name> Baiyun District</Name>  <Parent> 3</Parent>  </Local> -<Local>  <ID> 8</ID>  <Name> Tianhe District</Name>  <Parent> 3</Parent>  </Local> -<Local>  <ID> 9</ID>  <Name> Fuzhou inner District</Name>  <Parent> 4</Parent>  </Local> </root>

JS part: <script language = "JavaScript">
VaR cache;
VaR cachevalue;
VaR nownum = 1; // Hyde. chenvar Hyde;

XMLHTTP request -->
Function createxmlhttp ()
{
VaR ret = NULL;
Try {
Ret = new activexobject ('msxml2. xmlhttp ');

}
Catch (e ){
Try {
Ret = new activexobject ('Microsoft. xmlhttp ');
}
Catch (EE ){
Ret = NULL;
}
}
If (! RET & typeof XMLHttpRequest! = 'Undefined ')
Ret = new XMLHttpRequest ();
If (! RET)
{
Alert ("creating XMLHttpRequest failed! ")
}
Return ret;
}

Read Processing Module

Function loadxmltolist (VV, Oo, CC)
{
VaR XMLHTTP = createxmlhttp ();
XMLHTTP. onreadystatechange = function () // Ajax callback
{
Try {
If (XMLHTTP. readystate = 4 & XMLHTTP. Status = 200)
{

Xmldoc = XMLHTTP. responsexml
If (xmldoc! = NULL)
{
Node = xmldoc. lastchild. childnodes;
For (VAR I = 0; I <node. length; I ++ ){
Node1 = node. Item (I). selectsinglenode ("ID ");
Node2 = node. Item (I). selectsinglenode ("name ");
Node3 = node. Item (I). selectsinglenode ("parent ");
If (node3.text = vv)
{
VaR ooption = Document. createelement ("option ");
Ooption. Text = node2.text;
Ooption. value = node1.text;
// If (I = 0) ooption. Selected = true;
OO. Add (ooption );
}

}
If (oo. Options. length> 0) nownum + = 1;
Else return;
If (nownum <cc. Length & oo. Options. length> 0 & CC. length> 2)
{
Databing (nownum, CC );
}
}

}}
Catch (E)
{
// Alert ("error:" + E. Message );
// SetTimeout ("get_list (cache)", 10000 );
}

}
XMLHTTP. Open ("get", "Local. xml", true );
XMLHTTP. Send (null );
}

List change event

Function get_list (aa)
{
 
VaR B = getarray (aa)
// For (I = 1; I <B. length; I ++) // the next list can be processed only after the callback function is processed.
If (B. length> 1)
{
Databing (1, B );
}
} List clearing and calling Ajax
Function databing (I, C)
{
VaR listobj = Document. getelementbyid (C [I])
If (listobj! = NULL)
{
Cachevalue = Document. getelementbyid (C [I-1]). Options [document. getelementbyid (C [I-1]). selectedindex]. value;
Cache = C;
VaR COUNT = listobj. Options. length;
For (VAR n = 0; n <count; n ++)
{
Listobj. Remove (0 );
}
Xmldoc = loadxmltolist (cachevalue, listobj, cache );
} Else
{
Alert ('data loading failed! ');
}}

Obtain the list processing array.
Function getarray (vv)
{
Nownum = 1;
Switch (vv)
{

Case 1:
VaR o = new array ('local', 'region', 'ring ');
Return O;
Case 2:
VaR o = new array ('area ', 'ring ');
Return O;
Default:
Return NULL;
}
} HTML section

<Form ID = "form1" method = "Post">
<Div id = "login">
<Select id = "local" name = "local" onchange = "get_list (1)">
</SELECT>
<Select id = "area" name = "area" onchange = "get_list (2)">
</SELECT>
<Select id = "ring" name = "ring">
</SELECT>
</Div>
</Form>

Initialization:

<SCRIPT>
Nownum = 1; // counter, used to calculate the number of lists
VaR export bj = Document. getelementbyid ("local"); obtain the first drop-down box.
VaR o = new array ('null', 'local', 'region', 'ring ');
Loadxmltolist (0, invalid BJ, O)
</SCRIPT>

If you have any suggestions, please leave a message :)