코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<헤드>
<title> menu2level.html </title>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<script type = "text/javaScript">
함수 loadxml () {
var xmldoc;
노력하다{
//즉
xmldoc = new ActiveXobject ( "microsoft.xmldom");
} catch (e) {
노력하다{
xmldoc = document.implementation.createdocument ( "", "", null);
} catch (e) {
경고 (e.message);
반품;
}
}
xmldoc.async = false;
xmldoc.load ( "cities.xml");
XMLDOC를 반환합니다.
}
//로드 후 웹 페이지의로드가 완료되고 지방이로드됩니다.
onload = function () {
var xmldocument = loadxml ();
var provincearr = xmldocument.getElementsByTagName ( "province");
var prosize = provincearr.length;
for (var i = 0; i <prosize; i ++) {
// 옵션 노드를 만듭니다
var 옵션 요소 = document.createElement ( "옵션");
var provincename = provincearr [i] .getAttribute ( "name");
// 텍스트 노드를 만듭니다
var textlement = document.creatextNode (provinceName);
옵션. AppendChild (TextLement);
선택 사항 .setAttribute ( "value", provincename);
var node = document.getElementById ( "province");
node.appendChild (옵션);
}
}
// 지방 변경 이벤트
함수 changeprovince (노드) {
// 코너 마크를 선택합니다
var index = node.SelectedIndex;
// 해당 지방 이름을 얻습니다
var provencename = node.options [index] .Value;
로드 -도 (ProvinceName);
}
// 지방 번호에 따라 도시 정보를로드합니다
함수 loadCities (Proname) {
var xmldocument = loadxml ();
var provincearr = xmldocument.getElementsByTagName ( "province");
// 도시의 요소를 얻습니다
var cityselectele = document.getElementById ( "도시");
var size = cityselectele.options.length;
for (var i = size; i> 0; i-) {
Cityselectele.remove (i);
}
// 지방의 수를 얻습니다
var prosize = provincearr.length;
var 예정;
// 해당 지방 요소를 가져옵니다
for (var i = 0; i <prosize; i ++) {
if (provincearr [i] .getAttribute ( "name") == proname) {
금지 = provincearr [i];
부서지다;
}
}
// 도시의 도시 정보를 얻습니다
var citiesarr = proelement.getElementsByTagName ( "City");
var len = citiesarr.length;
for (var i = 0; i <len; i ++) {
// 옵션 노드를 만듭니다
var 옵션 요소 = document.createElement ( "옵션");
// 도시 이름을 얻습니다
var cityName = citiesarr [i] .firstchild.nodevalue;
// 텍스트 노드를 만듭니다
var textlement = document.creatextNode (CityName);
옵션. AppendChild (TextLement);
옵션 .setattribute ( "value", cityName);
CitySelectele.AppendChild (옵션);
}
}
함수 getValue () {
var pro = document.getElementById ( "Province"). 값;
var city = document.getElementById ( "도시"). 가치;
경고 (pro+":"+City);
}
</스크립트>
</head>
<body>
<id id = "province"onchange = "ChangeProvince (this)">
<옵션 값 = ""selected = "selected">-지방-</옵션>
</선택>
<id = "도시"를 선택하십시오
<옵션 값 = ""selected = "selected">-도시-</옵션>
</선택>
<입력 유형 = "버튼"value = "팝업"onclick = "getValue ()"/>
</body>
</html>
효과는 다음과 같습니다.
http://img.blog.csdn.net/20140315235043343?watermark/2/text/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbg1agvuz2h1atuymde=/font/5a6l5l2t/fontsi/400/i i03/i ze /용해/70/중력/남동쪽
Cities.xml 파일은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<? xml 버전 = "1.0"encoding = "utf-8"?>
<xml-body>
<province name = "shaanxi">
<city> xi'an </city>
<city> 한존 </city>
<City> Baoji </city>
<city> yan'an </city>
</province>
<province name = "Guangdong">
<city> Foshan </city>
<City> Shenzhen </city>
<City> 광저우 </city>
<City> Shantou </city>
</province>
<province name = "liaoning">
<city> 달리안 </city>
<City> Tieling </city>
<City> Anshan </city>
<city> 푸시 </city>
</province>
</xml-body>