下拉选两级联动问题

从xml文件中读书信息，作为html页面省市联动的市信息。
每次点一个市，就会把之前市的信息清除。只留下请选择
但是我用for循环从第一个开始删，删到第4个，就说类型不匹配。
我for循环从后往前删就没问题，很郁闷呢啊。
求帮助。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload = function() {
var provinceEle = document.getElementById("province"); provinceEle.onchange = function() {
var optionEle = provinceEle.getElementsByTagName("option");

var cityEleDel = document.getElementById("city");
var optionEleDel = cityEleDel.getElementsByTagName("option");
var length = optionEleDel.length;
//alert(optionEleDel.length);
//为什么我从这里1开始删除option就不行呢？
 for(var y=1;y<length;y++){
//alert(y + optionEleDel[y].firstChild.nodeValue);
cityEleDel.removeChild(optionEleDel[y]); 
}  
//从后往前删就可以
/* for(var y=optionEleDel.length-1;y>0;y--){
cityEleDel.removeChild(optionEleDel[y]);
} */

var xmlDoc = parseXML("cities.xml");

//alert(xmlDoc.getElementsByTagName("province").length);
var provinceXmlEle = xmlDoc.getElementsByTagName("province");
//alert(provinceXmlEle[0].getAttribute("name"));
for ( var i = 1; i < optionEle.length; i++) {
if (optionEle[i].selected) {
//alert(optionEle[i].value);
for(var j=0;j<provinceXmlEle.length;j++){
if(optionEle[i].value == provinceXmlEle[j].getAttribute("name")){

var cityXmlEle = provinceXmlEle[j].getElementsByTagName("city");
var cityEle = document.getElementById("city");
for(var k=0;k<cityXmlEle.length;k++){
//alert(cityXmlEle[k].firstChild.nodeValue);
var xmlCityEleToOption = document.createElement("option");
xmlCityEleToOption.setAttribute("value",cityXmlEle[k].firstChild.nodeValue);
var xmlCityTextNode = document.createTextNode(cityXmlEle[k].firstChild.nodeValue);
xmlCityEleToOption.appendChild(xmlCityTextNode);

cityEle.appendChild(xmlCityEleToOption);
}

}
}

}
}
}
function parseXML(fileName) {
try{//Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch (e) {
try{//Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "",
null);
} catch (e) {
return;
}
}
xmlDoc.async = false;
xmlDoc.load(fileName);

return xmlDoc;
} }
</script>
</html>
<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="吉林省">
<city>长春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>

解决方案 »

  1.   

    不大了解，不过貌似
     var length = optionEleDel.length;
                //alert(optionEleDel.length);
                //为什么我从这里1开始删除option就不行呢？
                 for(var y=1;y<length;y++){
                    //alert(y + optionEleDel[y].firstChild.nodeValue);
                    cityEleDel.removeChild(optionEleDel[y]); 
                }
    这里有问题，听说用一个变量来存取长度，再遍历数组会出现问题，你直接改成
    for(var y=1;y<optionEleDel.length;y++)
    试试
      

  2.   

    var length = optionEleDel.length;
    //alert(optionEleDel.length);
    //为什么我从这里1开始删除option就不行呢？
     for(var y=1;y<length;y++){
       //alert(y + optionEleDel[y].firstChild.nodeValue);
        cityEleDel.removeChild(optionEleDel[y]); 
    }
    每执行一次循环，optionEleDel.length就会-1，而length写在var中，长度不变，导致optionEleDel[y]数组越界。可以每次只删除第一个元素。如下：
     for(var y=1;y<optionEleDel.length;){
       //alert(y + optionEleDel[y].firstChild.nodeValue);
        cityEleDel.removeChild(optionEleDel[y]); 
    }
      

  3.   

    当然不能从前往后删除 ，如果从前往后删除，那么 前面被删除的元素不存在了，原来文档中元素也不复存在了 ，所以索引就指向错了。应该从后往前面删除。可以整体考虑 innerHtml=""