Home > Developer > JavaScript
The traditional HTML page uses two methods:
1) directly store the content in the drop-down box in html javascript, and call the javascript function to write it into the drop-down box cyclically. This method is not applicable to situations where the content of the drop-down box is frequently changed. Because the data source and javascript program are written to the same page.
<Html>
<Head>
<Title> List </title>
<Meta http-equiv = "Content-Type" content = "text/html; c
Harset = gb2312 ">
<Script LANGUAGE = "javascript">
<! --
Var onecount;
Onecount = 0;
Subcat = new Array ();
Subcat [0] = new Array ("Xuhui District", "01", "001 ");
Subcat [1] = new Array ("Jiading District", "01", "002 ");
Subcat [2] = new Array ("Huangpu District", "01", "003 ");
Subcat [3] = new Array ("Nanchang city", "02", "004 ");
Subcat [4] = new Array ("Jiujiang city", "02", "005 ");
Subcat [5] = new Array ("Shangrao City", "02", "006 ");
Onecount = 6;
Function changelocation (locationid)
{
Document. myform. smalllocation. length = 0;
Var locationid = locationid;
Var I;
Document. myform. smalllocation. options [0] = new Option ('==== all regions ==== ','');
For (I = 0; I <onecount; I ++)
{
If (subcat [I] [1] = locationid)
{
Document. myform. smalllocation. options [document. myform. smalllocation. length]
= New Option (subcat [I] [0], subcat [I] [2]);
}
}
}
// -->
</Script>
</Head>
<Body>
<Form name = "myform" method = "post">
<Select name = "biglocation"
OnChange = "changelocation (document. myform. biglocation. options [document. myform. biglocation. selectedIndex]. value)">
<Option value = "01" selected> Shanghai </option>
<Option value = "02"> Jiangxi </option>
</Select>
<Select name = "smalllocation">
<Option selected value = "" >== all regions ==</option>
</Select>
</Form>
<Script LANGUAGE = "javascript">
<! --
Changelocation (document. myform. biglocation. options [document. myform. biglocation. selectedIndex]. value );
// -->
</Script>
</Body>
</Html>
2) javascript reads the database directly, writes the records in the database to javascript, and calls the javascript function to write them into the drop-down box in a loop like the first method. This method separates the data source from javascript, but makes public the connection of the database, from a security perspective, there is little practical value.
My method is to put the data in the drop-down box in the XML file, read the XML file using javascript, and get the content in the drop-down box.
The HTML file is as follows:
<! -- Myfile.html -->
<Html>
<Head>
<Script language = "JavaScript" for = "window" event = "onload">
Var xmlDoc = new ActiveXObject ("Microsoft. XMLDOM ");
Var I = 0;
Var j = 0;
Var subclass_name = "";
LoadXML ();
Function loadXML (){
XmlDoc. async = "false ";
XmlDoc. load ("account. xml ");
Xmlobj1_xmldoc.doc umentElement;
Nodes = xmlDoc.doc umentElement. childNodes;
Document. frm. mainclass. options. length = 0;
Document. frm. subclass. options. length = 0;
For (I = 0; I <xmlObj. childNodes. length; I ++ ){
Labels = xmlObj. childNodes (I). getAttribute ("display_name ");
Values = xmlObj. childNodes (I). text;
Document. frm. mainclass. add (document. createElement ("OPTION "));
Document. frm. mainclass. options [I]. text = labels;
Document. frm. mainclass. options [I]. value = values;
}
}
</Script>
<Script language = "JavaScript">
Var xmlDoc = new ActiveXObject ("Microsoft. XMLDOM ");
Var I = 0;
Var j = 0;
Function setsubclass (main ){
Var is_selected = "N ";
If (document. frm. subclass. options. length! = 0 ){
For (I = 0; I <= document. frm. subclass. options. length; I ++)
Document. frm. subclass. options [I] = null;
}
// Valid only when repeated
If (document. frm. subclass. options. length! = 0 ){
For (I = 0; I <= document. frm. subclass. options. length; I ++ ){
Document. frm. subclass. options [I] = null;
Document. frm. subclass. options. remove (I );
}
}
For (I = 0; I <xmlObj. childNodes. length; I ++ ){
Var values = "";
Var lables = "";
If (is_selected = "Y") return;
Labels = xmlObj. childNodes (I). getAttribute ("display_name ");
Values = xmlObj. childNodes (I). text;
// Alert (labels + "|" + main );
If (labels = main ){
Is_selected = "Y ";
For (j = 0; j <xmlObj. childNodes (I). childNodes. length; j ++ ){
// Subclass_name = "document. frm. subclass ";
Labels = xmlObj. childNodes (I). childNodes (j). getAttribute ("display_name ");
Values = xmlObj. childNodes (I). childNodes (j). text;
// Alert (values );
Document. frm. subclass. add (document. createElement ("OPTION "));
Document. frm. subclass. options [j]. text = labels;
Document. frm. subclass. options [j]. value = values;
}
}
}
}
</Script>
<Title> call XML data in HTML </title>
</Head>
<Body bgcolor = "# FFFFFF">
<Form name = "frm">
Type <select name = "mainclass" OnChange = 'setsubclass (this [selectedIndex]. text) '> </SELECT>
<Option selected value = ""> </option>
Subclass <select name = "subclass"> </SELECT>
</Form>
</Body>
</Html>
Account. xml is as follows:
<? Xml version = "1.0" encoding = "gb2312"?>
<Item>
<Class display_name = "not selected">
<Subclass display_name = ""> Not Available </subclass>
</Class>
<Class display_name = "Recommended Website">
<Subclass display_name = "look pretty"> www.7say.com </subclass>
<Subclass display_name = "mobile Internet"> www.xj139.com </subclass>
<Subclass display_name = "Zhongxin industry"> www.xjzxsy.com </subclass>
</Class>
<Class display_name = "Portal">
<Subclass display_name = "Sina"> www.sina.com </subclass>
<Subclass display_name = "sosohu"> www.sohu.com </subclass>
</Class>
<Class display_name = "other websites">
<Subclass display_name = "Blue ideal"> www.blueidea.com </subclass>
</Class>
</Item>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
