1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>选择城市</title> 6 <style type="text/css"> 7 select{ 8 width:100px; 9 } 10 </style> 11 </head> 12 13 <body> 14 15 <script type="text/javascript"> 16 function selectCity(){ 17 var collCities = [['选择城市'], 18 ['海淀区','朝阳区','东城区','西城区'], 19 ['济南','青岛','烟台','威海'], 20 ['沈阳','大连','鞍山','抚顺'], 21 ['石家庄','保定','邯郸','廊坊'] 22 ]; 23 24 //获取两个下拉菜单对象 25 var oSelNode = document.getElementById("selid"); 26 var oSubSelNode = document.getElementById("subselid"); 27 28 //获取到底选择的是哪个省 29 var index = oSelNode.selectedIndex; 30 31 //通过角标到容器去获取对应的城市组 32 var arrCities = collCities[index]; 33 34 //清除动作 35 oSubSelNode.length = 0; 36 37 //将子菜单中的内容清空一下。 38 for(var x=1;x<oSubSelNode.options.length; ){ 39 oSubSelNode.removeChild(oSubSelNode.option[x]); 40 } 41 42 //遍历这个数组。并将这个数组的元素封装成option对象,添加到子菜单中 43 for(var x =0;x<arrCities.length;x++){ 44 var oOptNode = document.createElement("option"); 45 46 oOptNode.innerHTML = arrCities[x]; 47 oSubSelNode.appendChild(oOptNode); 48 } 49 } 50 51 52 </script> 53 54 <select id="selid" onchange="selectCity()"> 55 <option>选择省市</option> 56 <option>北京</option> 57 <option>山东</option> 58 <option>辽宁</option> 59 <option>河北</option> 60 </select> 61 62 <select id="subselid"> 63 <option>选择城市</option> 64 </select> 65 </body> 66 </html>