motivation:
Now let’s make a small example of applying XML in IE: solve the problem of connecting the double drop-down menu. The most common example of changing the city options after selecting provinces, so let’s try to do it in XML.
I used some of the functions introduced before to be completed directly in XML+XSL files. You may not be familiar with its usage, so I will use HMTL+XML this time, hoping to let everyone understand more clearly - "XML can be so simple!" :)
Material:
XML volume selection menu
There are 2 files: and
effect:
After selecting a province, the corresponding city can be automatically displayed, which is convenient for users, effectively improve data interaction, and make your page more colorful.
Effect:
Browse here
Code:
<?xml version="1.0" encoding="gb2312"?>
<China>
<State name="Jiangxi">
<City>Jiujiang</City>
<City>Nanchang</City>
<City>Lushan</City>
<City>Jingdezhen</City>
</State>
<State name="Beijing">
<City>Beijing West</City>
<City>Juyongguan</City>
<City>Tsinghua Park</City>
<City>Zhoukoudian</City>
</State>
<State name="Fujian">
<City>Fuzhou</City>
<City>Xiamen</City>
<City>Zhangzhou</City>
</State>
<State name="Gansu">
<City>Lanzhou</City>
<City>Luomen</City>
<City>Jiayuguan</City>
</State>
<State name="Guangdong">
<City>Guangzhou</City>
<City>Shenzhen</City>
<City>Dongguan</City>
<City>Shipai</City>
</State>
<State name="Anhui">
<City>Hefei</City>
<City>Huangshan</City>
<City>Kowloongang</City>
<City>Ma'anshan</City>
</State>
</China>
Custom function: ChooseState
(Read the name of the province in the XML data and add it to the SelState drop-down list)
function ChooseState()
{
var source;
var sourceName = "";
var source = new ActiveXObject(''); //Create an MSXML parser instance
= false;
(sourceName); //Load the XML document
root = ; //Set the document element as the root node element
sortField=("//@name"); //Search all nodes containing name in the property
for(var i=0;i<;++i) //Add the province name to the drop-down list
{
var oOption = ('OPTION');
= " "+sortField[i].text+" ";
= sortField[i].text;
(oOption);
}
ChooseCity();
}
Custom function: ChooseCity
(Read the corresponding city name in the XML data based on the currently selected province name and add it to the SelCity drop-down list)
function ChooseCity()
{
x=; //Read the current option of the province drop-down box
y=[x].value;
sortField=("//State[@name='"+y+"']/City&q uot;); //Search name attribute value is equal to
All city nodes under the State node with parameter y
for(var i=-1;i>=0;--i) //Undo the original list item
{
(i)
}
for(var i=0;i<;++i) //Add city name to the drop-down list
{
var oOption = ('OPTION');
= " "+sortField[i].text+" ";
= sortField[i].text;
(oOption);
}
}
Form source code
<BODY onLoad="ChooseState()">
<FORM action="" method="post" name="form1">
<SELECT name="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" >
</SELECT>
</FORM>
</BODY>
postscript:
When I first started learning XML, I was also confused like everyone else -- "I learned XML, but how should I use this XML?" This question has blocked me for a long time, for a long time...
Because e-commerce and software development are my expertise, I think I should start with the most familiar ones around me. So I will complete some of the most commonly used functions in website construction in XML. You can do the same!