（15）通过选择省市，来动态显示城市
通过选择省市，来动态显示城市
清空select中的元素：objSelect.length=0;
二维数组：省市与城市映射关系
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function selectCity()
{
var collCitys=[['选择城市']
,['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
//获取select中的option集合
var SelNode=document.getElementById("selid");
var CollOptNodes=SelNode.all;
//获取子下拉菜单
var SubNode=document.getElementById("subid");
//获取索引,并在数组中找到子数组
var index=SelNode.selectedIndex;
var arrCitys=collCitys[index];
//在添到子菜单前，应该先将子菜单中的元素清空,SubNode.options
//0角标的“选择城市”应该删除，因为若某人是北京海淀区的则可以减少一步城市的选择
/*for(var j=0;j<SubNode.options.length;j++)//0角标的选择城市应该删除
{
SubNode.removeChild(SubNode.options[j]);
j--;//长度减少，元素前移，所以要减1
}*/
//也可以通过select中设置属性：length=0
SubNode.length=0;
//遍历这个数组，并将这个数组的元素封装成option对象(创建节点)，添加到子菜单中
for(var i=0;i<arrCitys.length;i++)
{
var oOptNode=document.createElement("option");
oOptNode.innerHTML=arrCitys[i];
//放入子菜单中
SubNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option>北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subid">
<option>选择城市</option>
</select>
</body>
</html>
