Motivation:
Now let's do a little example of applying XML in IE: solving the problem of the double pull-down menu. The most common possibility is to change the city option after choosing a province, so let's try to do it with XML.
Previously introduced some of the features I was directly using the Xml+xsl file to complete, you may not be very familiar with its usage, so I use Hmtl+xml to do this, I hope to make it clearer to everyone-"XML can be so simple!" ”：）
Materials:
menu of XML volumes linked
There are 2 files: Citys.xml and cityselect.htm
Role:
After the selection of provinces can automatically show the corresponding city, so user-friendly, effectively improve data interaction, so that their own pages more colorful.
Effect:
Browse here
Code:
Citys.xml
<?xml version= "1.0" encoding= "gb2312"?>
<China>
<state id= "1" name= "Jiangxi" >
<City> Jiujiang </City>
<City> Nanchang </City>
<City> Lushan </City>
<City> Jingdezhen </City>
</State>
<state id= "2" name= "Beijing" >
<City> Beijing West </City>
<City> Juyongguan </City>
<City> Tsinghua Garden </City>
<City> Zhoukou Store </City>
</State>
<state id= "3" name= "Fujian" >
<City> Fuzhou </City>
<City> Xiamen </City>
<City> Zhangzhou </City>
</State>
<state id= "4" name= "Gansu" >
<City> Lanzhou </City>
<City> Locke Gate </City>
<City> Jia Yu Guan </City>
</State>
<state id= "5" name= "Guangdong" >
<City> Guangzhou </City>
<City> Shenzhen </City>
<City> Dongguan </City>
<City> Stone Brand </City>
</State>
<state id= "6" name= "Anhui" >
<City> Hefei </City>
<City> Huangshan </City>
<City> Kowloon Post </City>
<City> Maanshan </City>
</State>
</China>
Cityselect.htm
Custom Function: Choosestate
(reads the name of the province in the XML data and adds it to the Selstate drop-down list)
Function choosestate ()
{
var source;
var sourceName = "Citys.xml";
var Source = new ActiveXObject (' Microsoft.XMLDOM '); //Create a MSXML parser instance
Source.async = False
Source.load (sourceName); //Loading XML document
root = source.documentelement; // Sets the document element to be the root node element
Sortfield=root.selectnodes ("//@name "); //Search all nodes in the property that contain name
for (Var i=0;i<sortfield.length;++i) //Add province name to Drop-down list
{
var ooption = Document.createelement (' OPTION ');
ooption.text = "+sortfield[i].text+";
ooption.value = Sortfield[i].text;
Form1. SelState.options.add (ooption);
}
choosecity ();
}
Custom Function: Choosecity
(reads the corresponding city name in the XML data according to the current selected province name and adds it to the selcity drop-down list)
function choosecity ()
{
x= Form1. selstate.selectedindex; //Read the current option for the province drop-down box
Y=form1. Selstate.options[x].value;
Sortfield=root.selectnodes ("//state[@name = ' +y+" ']/city&q uot;); //Search for Name property value equals
All city nodes under the state node of parameter y
for (Var i=form1). Selcity.options.length-1;i>=0;--i) //Undo the original list item
{
Form1. SelCity.options.remove (i)
}
for (var i=0;i<sortfield.length;++i) //Add city name to Drop-down list
{
var ooption = document.createelement (' OPTION ');
ooption.text = "+sortfield[i].text+";
ooption.value = Sortfield[i].text;
Form1. SelCity.options.add (ooption);
}
}
Form Source
<body >
<form action= "" method= "Post" id= "Form1" Name= "Form1" >
<select name= "Selstate" id= "Selstate" >
</SELECT>
<select name= "selcity" id= "selcity" >
</SELECT>
</FORM>
</BODY>
Postscript:
When I first started to learn XML, I had the same confused---"XML I learned, but how can this XML be used?" "This question counter proposing me for a long, long time ...
Because E-commerce and software development is my specialty, so I think from the side of the most familiar to start it. So I'm going to use some of the features that are most commonly used in website construction to be done in XML. You can do the same!
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
