コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd html 4.01 transitional // en">
<html>
<head>
<title> menu2level.html </title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<script type = "text/javascript">
関数loadxml（）{
var xmldoc;
試す{
// IE
xmldoc = new ActiveXObject（ "microsoft.xmldom"）;
} catch（e）{
試す{
xmldoc = document.implementation.createdocument（ "" "、" "、null）;
} catch（e）{
アラート（e.message）;
戻る;
}
}
xmldoc.async = false;
xmldoc.load（ "cities.xml"）;
xmldocを返します。
}
// Webページの読み込みはロード後に完了し、州はロードされています。
onload = function（）{
var xmldocument = loadxml（）;
var provincearr = xmldocument.getelementsbytagname（ "stavince"）;
var prosize = provincearr.length;
for（var i = 0; i <prosize; i ++）{
//オプションノードを作成します
var optionElement = document.createelement（ "option"）;
var provincename = provincearr [i] .getattribute（ "name"）;
//テキストノードを作成します
var textelement = document.createTextNode（provencename）;
OptionElement.AppendChild（TextElement）;
optionElement.setattribute（ "value"、provincename）;
var node = document.getElementById（ "province"）;
node.appendChild（optionElement）;
}
}
//州変更イベント
function changeprovince（node）{
//選択したコーナーマークを取得します
var index = node.selectedIndex;
//対応する州名を取得します
var provincename = node.options [index] .value;
loadcities（provencename）;
}
//州番号に従って都市情報をロードします
関数loadcities（proname）{
var xmldocument = loadxml（）;
var provincearr = xmldocument.getelementsbytagname（ "stavince"）;
//都市の要素を取得します
var cityselectele = document.getElementById（ "cities"）;
var size = cityselectele.options.length;
for（var i = size; i> 0; i-）{
CitySelectele.Remove（i）;
}
//州の数を取得します
var prosize = provincearr.length;
var ProElement;
//対応する州要素を取得します
for（var i = 0; i <prosize; i ++）{
if（provincearr [i] .getattribute（ "name"）== proname）{
proElenement = provincearr [i];
壊す;
}
}
//州の都市情報を入手してください
var citiesarr = proelement.getelementsbytagname（ "city"）;
var len = citiesarr.length;
for（var i = 0; i <len; i ++）{
//オプションノードを作成します
var optionElement = document.createelement（ "option"）;
//都市名を取得します
var cityName = citiesArr [i] .firstchild.nodevalue;
//テキストノードを作成します
var textelement = document.createTextNode（cityName）;
OptionElement.AppendChild（TextElement）;
optionElement.SetAttribute（ "Value"、CityName）;
CitySelectele.AppendChild（optionElement）;
}
}
関数getValue（）{
var pro = document.getElementById（ "province"）。value;
var city = document.getElementById（ "cities"）。value;
アラート（pro+"："+city）;
}
</script>
</head>
<body>
<select id = "provence" onchange = "changeprovince（this）">
<option値= "" selected = "selected"> - 州 - </option>
</select>
<選択id = "cities">
<オプション値= "" selected = "selected"> - city- </option>
</select>
<入力型= "ボタン"値= "ポップアップ" onclick = "getValue（）"/>
</body>
</html>
効果は次のとおりです。
http://img.blog.csdn.net/201403152355043343?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbgl1agvuz2h1atuymde=/font/font/5a6l5l2qf/ =/溶解/70/重力/南東
cities.xmlファイルは次のとおりです。
コードコピーは次のとおりです。
<？xmlバージョン= "1.0" encoding = "utf-8"？>
<xml-body>
<province name = "shaanxi">
<city> xi'an </city>
<city> hanzhong </city>
<city> baoji </city>
<city> yan'an </city>
</staul>
<province name = "guangdong">
<city> foshan </city>
<city> Shenzhen </City>
<city>広州</city>
<city> shantou </city>
</staul>
<province name = "liaoning">
<city> dalian </city>
<city> tieling </city>
<city> anshan </city>
<city> fushun </city>
</staul>
</xml-body>