奇怪的打印结果,为什么删除的内容会出现间隔呢?

 <!DOCTYPE html>
<html>
<head>
    <title>Ajax案例一</title>
    <meta charset="utf-8"/>
</head>
<body>
    <!-- 二级联动 -->
    <select id="province">
        <option>请选择</option>
        <option>山东省</option>
        <option>辽宁省</option>
        <option>吉林省</option>
        <option>台湾省</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>
    <script>
    var provinceEle=document.getElementById('province');
    provinceEle.onchange=function(){
        var city=document.getElementById('city');
        var opts = city.getElementsByTagName('option');
        for(var i=1;i<opts.length;i++){ //用于清除每次切换后的残余剩余option
            console.log(opts[i]);
            city.removeChild(opts[i]);
        }
        var province = provinceEle.value;   
        var pCities=[];
        switch(province){
            case "山东省":
            pCities=["山东1","山东2","山东3","山东4","山东5"];
            break;
            case "辽宁省":
            pCities=["辽宁1","辽宁2","辽宁3"] 
            break;
            case "吉林省":
            pCities=["吉林1","吉林2","吉林3","吉林4"]
            break;
            default :
            alert("不存在该省份城市信息");
        }
        for(var i=0;i<pCities.length;i++){
            var myOption=document.createElement("option");
            var textNode = document.createTextNode(pCities[i]);
            myOption.appendChild(textNode);
            document.getElementById('city').appendChild(myOption);
        }   
    }
    </script>
</body>
</html>

奇怪的是,我切换省份标签后得到的市域标签 为什么会出现删除了 山东1,山东3,山东5这种-间隔-的情况,应该是连续的才对吧,有高手能告诉我下产生的原因吗?

因为你的opts变量和opts.length在每一次的removeChild之后都改变了,清除是从1开始为标记,所以每次都是从位置第二删除。实际上清除的循环
只执行了三次,opts.length分别是6、5、4。图片说明

啊,原来如此。这么奇怪的问题,不是难为人吗...............