<!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这种-间隔-的情况，应该是连续的才对吧，有高手能告诉我下产生的原因吗？
