黑马程序员-DOM（第七讲下拉菜单-选择城市）

需求：前面一个下拉列表，提供选择省份，后面一个下拉列表，提供选择城市

<select id=”selid”>

<option>选择省份</option>

<option value=”beijing”>北京</option>

<option>山东</option>

<option>辽宁</option>

<option>河北</option>

</select>

 

<select id=”subselid”  onchange=”selectCity()”>

<option>选择城市</option>

</select>

 

<script type=”text/javascript”>

function selectCity()

{

var  collCities=[[‘选择城市’]

,[‘海淀区’,’朝阳区’,’东城区’,’西城区’]

,[‘济南’,’青岛’,’鞍山’,’威海’]

,[‘沈阳’,’大连’,’烟台’,’抚顺’]

,[‘石家庄’,’保定’,’邯郸’,’廊坊’]];

 

//另一种方式：var arr={“beijing”:[‘海淀区’,’朝阳区’,’东城区’,’西城区’]};

//获取两个下拉菜单对象

var oSelNode=document.getElementById(“selid”);

var oSubSelNode=document.getElementById(“subselid”);

//获取到底选择的是哪个省

var index=oSelNode.selectedIndex;

var arrCities=collCitied[index];

//将子菜单的内容清除一下

for(var x=0;x<oSubSelNode.options.length;)//注意这里没有x++这个语句

{

oSubSelNode.removeChild(oSubSelNode.options[x]);

}

 

//还有个比较简单的方法来清除子菜单：oSubSelNode.length=0;

//遍历这个数组，并将这个数组的元素封装成option对象，添加到子菜单中

for(var x=0;x<arrCities.length;x++)

{

var oOptNode=document.createElement(“option”);

oOptNode.innerHTML=arrCities[x];

oSubSelNode.appendChild[oOptNode]

}

 

}

</script>