<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> function selectCity() { var collCities = [ ['选择城市'],[ '海淀区','朝阳区','西城区', '东城区' ], [ '济南', '青岛', '烟台', '日照' ], [ '石家庄', '保定', '邯郸', '廊坊' ], [ '沈阳', '大连', '铁岭', '抚顺' ] ]; //获取两个下拉菜单对象 var oSelNode=document.getElementById("selid"); var oSubSelNode=document.getElementById("subselid"); //获取到底选的是哪个省 var index=oSelNode.selectedIndex; //通过角标到容器去获取对应的城市数组 var arrCities=collCities[index]; //将城市列表的子菜单中的内容清空一下 //将for循环中的x++去掉了，原因是removeChild的删除 //的方式是，指针指向第一个删除的元素删除成功后指针会向前移动， //同时数组内的元素会因为删除出现的空位整体向前移动，这用就会 //漏删，去掉x++就会是指针保持在0角标的位置，删除一个数组元素， //出现空位后，后面的元素会移动将空位补全，这样就可以完全删除 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> <select id="selid" onchange="selectCity()"> <option>选择省市</option> <option value="beijing">北京</option> <option>山东</option> <option>河北</option> <option>辽宁</option> </select> <select id="subselid"> <option>请选择城市</option> </select> </body> </html>