<!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>