需求:前面一个下拉列表,提供选择省份,后面一个下拉列表,提供选择城市
<select id=”selid”>
<option>选择省份</option>
<option value=”beijing”>北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id=”subselid” οnchange=”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]
}
}