Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en">
<html>
<kopf>
<title> Menü2Level.html </title>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<script type = "text/javaScript">
Funktion loadxml () {
var xmldoc;
versuchen{
// dh
xmldoc = new ActiveXObject ("microsoft.xmldom");
} catch (e) {
versuchen{
xmldoc = document.implementation.createdocument ("", "", null);
} catch (e) {
Alarm (E.Message);
zurückkehren;
}
}
xmldoc.async = false;
xmldoc.load ("cities.xml");
Return XMLDOC;
}
// Das Laden der Webseite ist nach dem Laden abgeschlossen und die Provinz lädt.
onload = function () {
var xmldocument = loadxml ();
var provincearr = xmldocument.getElementsByTagName ("Provinz");
var proside = provincearr.length;
für (var i = 0; i <proside; i ++) {
// Optionsknoten erstellen
var optionElement = document.createelement ("Option");
var provincename = provincearr [i] .getAttribute ("name");
// Erstellen Sie einen Textknoten
var textElement = document.createTextNode (provincName);
OptionElement.AppendChild (TextElement);
optionElement.setAttribute ("Wert", Provinzename);
var node = document.getElementById ("Provinz");
node.AppendChild (OptionElement);
}
}
// Provinzwechslungsereignis
Funktion ChangeProvince (Knoten) {
// Ausgewählte Eckmarke erhalten
var index = node.selectedIndex;
// Erhalten Sie den entsprechenden Provinznamen
var provincename = node.options [index] .Value;
Loadcities (Provinzenenname);
}
// Stadtinformationen gemäß der Provinznummer laden
Funktion Loadcities (Proname) {
var xmldocument = loadxml ();
var provincearr = xmldocument.getElementsByTagName ("Provinz");
// Elemente der Stadt bekommen
var CitySelectele = document.getElementById ("Städte");
var size = CitySelectele.options.Length;
für (var i = Größe; i> 0; i-) {
CitySelectele.Remove (i);
}
// Erhalten Sie die Anzahl der Provinzen
var proside = provincearr.length;
var proelement;
// Holen Sie sich das entsprechende Provinzelement
für (var i = 0; i <proside; i ++) {
if (provincearr [i] .getAttribute ("name") == proname) {
proelement = provincearr [i];
brechen;
}
}
// Die Stadtinformationen der Provinz erhalten
var citiesarr = proelement.getElementsByTagName ("Stadt");
var len = citiesarr.length;
für (var i = 0; i <len; i ++) {
// Optionsknoten erstellen
var optionElement = document.createelement ("Option");
// den Stadtnamen bekommen
var CityName = Citiesarr [i] .Firstchild.nodeValue;
// Erstellen Sie einen Textknoten
var textElement = document.createTextNode (CityName);
OptionElement.AppendChild (TextElement);
OptionElement.SetAttribute ("Wert", CityName);
CitySelectele.AppendChild (OptionElement);
}
}
Funktion getValue () {
var pro = document.getElementById ("Provinz"). Wert;
var City = document.getElementById ("Städte"). Wert;
Alert (pro+":"+Stadt);
}
</script>
</head>
<body>
<select id = "provinz" onchange = "changeProvince (this)">
<Option Value = "" Selected = "Selected">-Provinz-</Option>
</select>
<Select id = "Städte">
<Option Value = "" Selected = "Selected">-City-</option>
</select>
<Eingabe type = "button" value = "pop -up" onclick = "getValue ()"/>
</body>
</html>
Die Effekte sind wie folgt:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsi ze/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
Die Datei Cities.xml lautet wie folgt:
Die Codekopie lautet wie folgt:
<? xml Version = "1.0" coding = "utf-8"?>
<xml-body>
<Provinz Name = "Shaanxi">
<City> xi'an </City>
<City> Hanzhong </city>
<City> baoji </city>
<City> yan'an </City>
</Provinz>
<Provinz Name = "Guangdong">
<City> Foshan </City>
<City> Shenzhen </City>
<City> Guangzhou </City>
<City> shantou </city>
</Provinz>
<Provinz Name = "Liaoning">
<City> dalian </city>
<City> Tieling </City>
<City> Anshan </City>
<City> Fushun </City>
</Provinz>
</xml-body>