XML volume actual combat kit (4): menu

motivation:

Now we have a small example of applying XML in IE: Solve the linkage of dual down pull menu. Everyone is the most common possibility is to select the example of changing the city option after the province. Let's try to complete it with XML.

Some of the features mentioned in the previous introduction I have done directly with the XML XSL file. You may not be very familiar with it, so I use HMTL XML this time, I hope everyone knows more clearly - " XML can be so simple! ":)

material:

XML volume menu

There are 2 files: citys.xml and cityselect.htm

effect:

After selecting the province, you can automatically display the corresponding city, so that users can effectively improve data interaction, so that their page is more colorful.

effect:

Browse here

Code:

Citys.xml

Jiujiang

Nanchang

Lushan

Jingdezhen

Beijing West

Juyongguan

Tsinghua Park

Zhoukou shop

Fuzhou

Xiamen

Zhangzhou

Lanzhou

Luo Gom

Jiayuguan

Guangzhou

Shenzhen

Dongguan

Shipai

Hefei

Huangshan

Jiulongang

Maanshan

Cityselect.htm

Custom functions: choosestate

(Read the name of the province in XML data, and add to the drop-down list of SELSTATE)

Function choosestate ()

{

Var Source;

Var SourceName = "Citys.xml"; var source = new activ = new activity ('microsoft.xmldom'); // Create an MSXML parser instance

Source.async = false;

Source.load (SourceName); // Load an XML document

root = source.documentelement; // Set the document element as root node elements

Sortfield = root.selectNodes ("@ name"); // Search all nodes with name in the search attribute

For (var i = 0; i

{

Var OOPTION = Document.createElement ('Option');

OOption.text = "" sortfield [i] .text ""

OOption.Value = sortfield [i] .text;

Form1.Selstate.Options.Add (OOption);

}

Choosecity ();

}

Custom function: choiseCity

(Read the corresponding city name in XML data according to the currently selected province name, and add to the drop-down list of SELCITY)

Function choiseCity ()

{

X = form1.selState.selectedIndIndex; // Read the current option of the province drop-down box

Y = form1.selstate.Options [x] .value;

Sortfield = root.selectnodes ("// state [@Name = '" y "" / city & q UOT;); // Search Name property value is equal to

All CITY nodes under the State node of 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

{

Var OOPTION = Document.createElement ('Option');

OOption.text = "" sortfield [i] .text ""

OOption.Value = sortfield [i] .text;

Form1.selcity.Options.add (OOption);

}

}

Form source code

postscript:

When I first started learning XML, I also had the same confusion as you - "XML I learned, can this XML should be used?" This problem is hard, I have been a long time ......

Because e-commerce and software development is my expertise, so I think it is still starting from the beginning of the most familiarity. So I complete some of the most commonly used functions in the website in XML. You can also!