|
js 解析xml文件實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單
寫一個(gè)省市的XML文檔 city.xml <!--EndFragment--> <?xml version="1.0" encoding="UTF-8"?> <cities> <province name="北京"> <city>大興</city> <city>海淀</city> <city>沙河</city> <city>朝陽</city> <city>昌平</city> <city>西單</city> <city>中關(guān)村</city> </province> <province name="河北"> <city>石家莊</city> <city>保定</city> <city>承德</city> <city>邢臺(tái)</city> <city>邯鄲</city> <city>廊坊</city> <city>唐山</city> </province> <province name="陜西"> <city>西安</city> <city>咸陽</city> <city>銅川</city> <city>渭南</city> <city>漢中</city> <city>商洛</city> <city>延安</city> </province> </cities>
city.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h1> 解析xml文件實(shí)現(xiàn)省市級(jí)聯(lián)下拉單 </h1> <div> <span> <select id="province" name="province"> <option> 請(qǐng)選擇省 </option> </select> </span> <span> <select id="cities" name="city"> <option>請(qǐng)選擇相應(yīng)省下面的市 </option> </select> </span> <span> <select id="counties" name="county"> <option>請(qǐng)選擇相應(yīng)市下面的縣 </option> </select> </span> </div> </body> </html>
javascript
<script>
window.onload = function() {
var xmlDom;
try {
//針對(duì)的是IE瀏覽器 創(chuàng)建一個(gè)空的微軟
XML 文檔對(duì)象
xmlDom = new ActiveXObject
("Microsoft.XMLDOM");
} catch (err) {
try {
//在 Firefox 及其他瀏覽器中的 XML 解析器
//創(chuàng)建一個(gè)空的 XML 文檔對(duì)象。
xmlDom = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//關(guān)閉異步加載，這樣確保在文檔完全加載之前解析器不會(huì)繼續(xù)腳本的執(zhí)行
xmlDom.async = "false";
//解析器加載名為 "xxx.xml" 的 XML 文檔、
xmlDom.load("city.xml");
//獲取xml文件的根節(jié)點(diǎn)
var root = xmlDom.documentElement;
//獲取根節(jié)點(diǎn)下面的省節(jié)點(diǎn)
var provinces = root.childNodes;
var province = document.getElementById("province");
for ( var i = 0; i < provinces.length; i++)
{
//獲取省節(jié)點(diǎn)的name屬性的值
var name = provinces[i].getAttribute("name");
//創(chuàng)建一個(gè)option
var opt = document.createElement("option");
//為option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父節(jié)點(diǎn)中
province.appendChild(opt);
}
var cities = document.getElementById("cities");
province.onchange = function() {
var pce = document.getElementById("province");
var opts = pce.options;
var opt1 = opts[pce.selectedIndex];
var name = opt1.innerHTML;
for ( var i = 0; i <
provinces.length; i++) {
//獲取省節(jié)點(diǎn)的name屬性的值
var name1 = provinces
[i].getAttribute("name");
if (name == name1) {
cities.length=1;//每次改變的時(shí)候清空
var pros = provinces[i];
var citys = pros.childNodes;
for ( var j = 0; j < citys.length; j++) {
//創(chuàng)建一個(gè)option
var opt1 = document.createElement("option");
//為option添加文本
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//添加到父節(jié)點(diǎn)中
cities.appendChild(opt1);
}
}
}
}
}
</script>
**存在的問題是 ，只能在IE瀏覽器中打開，望哪位高手解決兼容性！ <!--EndFragment--> |
|
|
