xml数据：cities.xml
有一个小问题：有的浏览器不兼容
<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="河北">
<city>石家庄</city>
<city>保定</city>
<city>廊坊</city>
<city>唐山</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>
<province name="吉林">
<city>长春 </city>
<city>吉林市</city>
<city>白城</city>
<city>四平</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>
<province name="辽宁">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>辽阳</city>
<city>营口</city>
<city>盘锦</city>
</province>
</china>
js代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二级下拉框</title>
<script type="text/javascript">
/**
* 加载xml文档
* @param {Object} file
*/
function parseXML(file)
{
var xmlDoc;
try{
//IE浏览器,创建一个空的xml文档
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
//firefox,mazilla,opera,etc.,创建一个空的xml文档
xmlDoc = document.implementation.createDocument("","",null);
}catch(e){
alert("xml解析失败！！！");
}
}
//关闭异步加载
xmlDoc.async="false";
//加载xml文件
xmlDoc.load(file);
return xmlDoc;
}
window.onload = function(){
//调用函数加载xml
var xmlfile = parseXML("cities.xml");
//得到select 节点
var provinces = document.getElementById("provinces");
//从xml中得到所有的province节点
var xmlProvinces = xmlfile.getElementsByTagName("province");
/**两次的值竟然不一样**/
alert("原来:"+xmlProvinces.length);
alert("后来："+xmlProvinces.length);
//先清空所有的列表
for(var i =0 ;i<xmlProvinces.length; i++){
//拼装成option
var option = document.createElement("option");
//给option设置属性
option.setAttribute("value",xmlProvinces[i].getAttribute("name"));
var value = document.createTextNode(xmlProvinces[i].getAttribute("name"));
//将值添加到option
option.appendChild(value);
//将option添加到select
provinces.appendChild(option);
}
//得到cities的select节点
var cities = document.getElementById("cities");
provinces.οnchange= function(){
//删除城市select节点原来有的内容，从后往前山
for(var i=cities.options.length;i>0;i--){
cities.remove(i);
}
var xmlprovinces = xmlfile.getElementsByTagName("province");
for(var i=0;i<xmlprovinces.length;i++){
if(xmlprovinces[i].getAttribute("name")== provinces.value){
var xmlcities = xmlprovinces[i].getElementsByTagName("city");
for(var j = 0 ;j<xmlcities.length;j++){
//组装option
var option = document.createElement("option");
var optionText = document.createTextNode(xmlcities[j].firstChild.nodeValue);
option.appendChild(optionText);
cities.appendChild(option);
}
}
}
}
}
</script>
</head>
<body>
<select name="provinces" id="provinces" >
<option value="">------请选择省份------</option>
</select>
<select name="cities" id="cities">
<option value="">------请选择城市------</option>
</select>
</body>
</html>有一个小问题：有的浏览器不兼容
比如
/**两次的值竟然不一样**/
alert("原来:"+xmlProvinces.length);
alert("后来："+xmlProvinces.length);两次打印的值不一样，在第40行， 没想通为什么，高手请赐教！！！
扫一扫
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
