La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd html 4.01 transitional // en">
<html>
<adal>
<Title> menu2level.html </Title>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<script type = "text / javascript">
fonction chargexml () {
var xmldoc;
essayer{
// c'est-à-dire
xMLDOC = new activeXObject ("Microsoft.xmldom");
} catch (e) {
essayer{
xmlDoc = document.implementation.CreateDocument ("", "", null);
} catch (e) {
alerte (E.Message);
retour;
}
}
xmldoc.async = false;
xmLDoc.load ("cities.xml");
retour xMLDOC;
}
// Le chargement de la page Web est terminé après le chargement, et la province se charge.
onload = function () {
var xmlDocument = loadXml ();
var provincearr = xmldocument.getElementsByTagName ("Province");
var prosize = provincearr.length;
pour (var i = 0; i <prosize; i ++) {
// Créer un nœud d'option
var optionElement = Document.CreateElement ("Option");
var provinceName = provincearr [i] .getAttribute ("name");
// Créer un nœud de texte
var textelement = document.CreateTextNode (provinceName);
optionElement.ApendChild (TextElement);
optionElement.setAttribute ("Value", ProvinceName);
var node = document.getElementById ("province");
Node.ApendChild (optionElement);
}
}
// Événement de changement de province
fonction changeprovince (nœud) {
// Obtenez une marque d'angle sélectionnée
var index = node.selectedIndex;
// Obtenez le nom de la province correspondante
var provinceName = node.options [index] .value;
Loadcities (ProvinceName);
}
// Chargez les informations de la ville selon le numéro de la province
Fonction Loadcities (proname) {
var xmlDocument = loadXml ();
var provincearr = xmldocument.getElementsByTagName ("Province");
// Obtenez des éléments de la ville
var CitySeleClele = document.getElementById ("Cities");
var size = CitySeleclele.options.length;
pour (var i = size; i> 0; i -) {
Cityselectele.Remove (i);
}
// obtient le nombre de provinces
var prosize = provincearr.length;
Var Proelement;
// Obtenez l'élément de province correspondant
pour (var i = 0; i <prosize; i ++) {
if (provincearr [i] .getAttribute ("name") == proname) {
proelement = provincearr [i];
casser;
}
}
// Obtenez les informations de la ville de la province
var citiesarr = proElement.getElementsByTagName ("ville");
var len = citiesarr.length;
pour (var i = 0; i <len; i ++) {
// Créer un nœud d'option
var optionElement = Document.CreateElement ("Option");
// Obtenez le nom de la ville
var cityname = citiesarr [i] .firstchild.nodevalue;
// Créer un nœud de texte
var textelement = document.CreateTextNode (CityName);
optionElement.ApendChild (TextElement);
optionElement.SetAttribute ("Value", CityName);
Cityselelele.ApendChild (optionElement);
}
}
fonction getValue () {
var pro = document.getElementByid ("Province"). Valeur;
var ville = document.getElementById ("villes"). valeur;
alerte (pro + ":" + ville);
}
</cript>
</ head>
<body>
<select id = "province" onchange = "ChangeProvince (this)">
<Option Value = "" Selected = "Selected"> - Province - </ Option>
</lect>
<select id = "Cities">
<Option Value = "" Selected = "Selected"> - City - </ Option>
</lect>
<input type = "bouton" value = "pop up" onclick = "getValue ()" />
</docy>
</html>
Les effets sont les suivants:
http://img.blog.csdn.net/20140315235043343?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl1agvuz2h1atumyde OLVE / 70 / Gravity / Southeast
Le fichier cities.xml est le suivant:
La copie de code est la suivante:
<? xml version = "1.0" Encoding = "utf-8"?>
<xml-body>
<province name = "shaanxi">
<gity> xi'an </gity>
<gity> Hanzhong </gity>
<gity> baoji </gity>
<gity> yan'an </gity>
</proving>
<province name = "Guangdong">
<gity> Foshan </gity>
<gity> Shenzhen </gity>
<gity> Guangzhou </gity>
<gity> shantou </gity>
</proving>
<province name = "liaoning">
<gity> dalian </gity>
<gity> Tieling </gity>
<gity> Anshan </gity>
<gity> Fushun </gity>
</proving>
</ xml-body>