JS中DOM对象使用的练习
案例思路：
省级联动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>联动</title>
</head>
<body>
省：
<select onchange="chg();" id="province">
<option value="-1">请选择</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">河北省</option>
</select>
市：
<select id="city">
<option>请选择</option>
</select>
<script type="text/javascript">
//获取省份所对应的城市
function loadCities(){
return [
["杭州","宁波","温州"],
["南京","苏州","无锡"],
["石家庄","保定","张家口"]
];
}
//页面加载后自动获取城市
var cities = loadCities();
function chg(){
//获取省份下拉选
var sel1 = document.getElementById("province");
//获取省份的序号
var index = sel1.value;
//获取该省份对应的城市
var pcities = cities[index];
//删除所有城市（请选择除外）
var sel2 = document.getElementById("city");
var options = sel2.children;
for(var i=options.length-1;i;i--){//不删除【请选择】：处理代码
options[i].remove();
}
if(pcities){
//追加城市
for(var i=0;i<pcities.length;i++){
var opn = document.createElement("option");
opn.innerHTML = pcities[i];
sel2.appendChild(opn);
}
}
}
</script>
</body>
</html>最终页面显示效果：选择对应省份后对应市会自动匹配该省份下的城市
