下拉菜单--二级联动菜单练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">select{width:100px;}</style><script type="text/javascript">function selcity(){var arr = [[],['海淀区', '朝阳区', '东城区', '西城区'],['沈阳', '大连', '鞍山', '抚顺'],['济南', '青岛', '烟台', '威海'],['石家庄', '廊坊', '唐山', '秦皇岛']];//获取选择的省的角标var selNode = document.getElementById("selid");var index = selNode.selectedIndex;var cities = arr[index];var subSelNode = document.getElementById("subselid");//有更简单的清除方式，只要改变下拉菜单的长度即可subSelNode.options.length = 0;/*//清除上一次选择的子菜单的内容for(var x = 1; x < subSelNode.options.length;){subSelNode.removeChild(subSelNode.options[x]);}*/for(var x = 0; x < cities.length; x++){var optNode = document.createElement("option");optNode.innerHTML = cities[x];subSelNode.appendChild(optNode);}}</script></head><body><select id="selid" onchange="selcity()"><option>--选择省市--</option><option>北京市</option><option>辽宁省</option><option>山东省</option><option>河北省</option></select><select id="subselid"><option>--选择城市--</option></select></body></html>
运行结果：
