china.xml文档
郑州
洛阳
安阳
石家庄
邯郸
张家口
和平区
北辰区
河西区
c.html
c.htmlvar xmlDocument = null;
var provinces = null;
var domSelectcities = null;
window.onload = function() {
xmlDocument = parseXML("china.xml");
provinces = xmlDocument.getElementsByTagName("province");
//获取省select对应的dom对象
var domSelectPro = document.getElementById("pro");
domSelectcities = document.getElementById("city");
for ( var i = 0; i < provinces.length; i++) {
var xmlPro = provinces[i];
//xxxxx
var newChild = document.createElement("option");
//xxxxx
var newTxt = document.createTextNode(xmlPro.getAttribute("name"));
//把xxxxx添加到option
newChild.appendChild(newTxt);
//把option添加到select
domSelectPro.appendChild(newChild);
}
//注册事件
domSelectPro.onchange = onSelectProcg;
};
var onSelectProcg = function() {
//清空html select 中city
// domSelectcities.childNodes.length=0; //思考以下 请参看redarmy_chen
//第一种:domSelectcities.length=0;
//第二种:
var cnodes=domSelectcities.childNodes;
for(var r=0;r
domSelectcities.removeChild(cnodes[0]);
}
//遍历xml所有的省
for ( var i = 0; i < provinces.length; i++) {
//得到xml文件中具体的某个省
var xmlPro = provinces[i];
//判断当前省市xml文件中的那个省
if (this.value == xmlPro.getAttribute("name")) {
//解析出xml文件省下面对应的city
var xmlCities = xmlPro.getElementsByTagName("city");
for ( var k = 0; k < xmlCities.length; k++) {
//河西区
var newChild = document.createElement("option");
//河西区
var newTxt = document.createTextNode(xmlCities[k].firstChild.nodeValue);
//把xxxxx添加到option
newChild.appendChild(newTxt);
//把option添加到select
domSelectcities.appendChild(newChild);
}
}
}
};
function parseXML(filename) {
var xmlDoc; //document对象
try { //Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (e) {
try { //Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行。
xmlDoc.async = false;
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDoc.load(filename);
return xmlDoc;
}
二级联动
请选择省市
请选择市