motivation:
Now let's do a small example of applying XML in IE: solving the linkage problem of double drop-down menus. Perhaps the most common example is to select a province and then change the city options, so let's try to use XML to complete it.
Some of the functions I introduced before were implemented directly using XML+XSL files. You may not be very familiar with its usage, so I will use HMTL+XML this time, hoping to give everyone a clearer understanding--" XML can be so simple!" :)
Material:
There are 2 files linked to the XML volume selection menu: Citys.xml and CitySelect.htm.
The functions are:
After selecting a province, the corresponding city can be automatically displayed, which is convenient for users, effectively improves data interaction, and makes your page more colorful.
Effect:
Browse here
Code:
Cities.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>Zhoukoudian</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>Lomen</City>
<City>Jiayuguan</City>
</State>
<State id="5" name="Guangdong">
<City>Guangzhou</City>
<City>Shenzhen</City>
<City>Dongguan</City>
<City>Shipai</City>
</State>
<State id="6" name="Anhui">
<City>Hefei</City>
<City>Huangshan</City>
<City>Kowloon Hill</City>
<City>Ma'anshan</City>
</State>
</China>
CitySelect.htm
custom function: ChooseState
(Read the name of the province in the XML data and add it to SelState's drop-down list)
functionChooseState()
{
var source;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Create an MSXML parser instance
source.async = false;
source.load(sourceName); //Load XML document
root = source.documentElement; //Set the document element as the root node element
sortField=root.selectNodes(" //@name "); //Search for all nodes whose attributes contain name
for(var i=0;i<sortField.length;++i) //Add province names to the 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
(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)
functionChooseCity()
{
x=form1.SelState.selectedIndex; //Read the current options of the province drop-down box
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Search for all city nodes under the State node whose name attribute value is equal to the 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 code
<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" onchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</FORM>
</BODY>
Postscript:
When I first started learning XML, I had the same confusion as everyone else - "I have learned XML, but how should I use it?" This question has hindered me for a long time, a long time...
Because e-commerce and software development are my expertise, I thought it would be better to start with what I am most familiar with. So I implemented some of the most commonly used functions in website construction in XML. You can do it too!