1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 9 function getEara(){ 10 var province=document.getElementById("province").value; 11 12 if(province=='bj'){ 13 document.getElementById("eara").innerHTML= 14 "<option>---请选择---</option><option value='dc'>东城区</option><option value='xc'>西城区</option><option value='xw'>宣武区</option><option value='cy'>朝阳区</option>"; 15 } 16 if(province=='sh'){ 17 document.getElementById("eara").innerHTML= 18 "<option>---请选择---</option><option value='cn'>长宁区</option><option value='hf'>黄浦区</option><option value='lw'>卢湾区</option><option value='xh'>徐汇区</option>"; 19 } 20 if(province=='tj'){ 21 document.getElementById("eara").innerHTML= 22 "<option>---请选择---</option><option value='hp'>和平区</option><option value='hd'>河东区</option><option value='hx'>河西区</option><option value='nk'>南开区</option>"; 23 } 24 } 25 function getCity(){ 26 var cityArr=new Array(12); 27 28 cityArr[0]=new Array("东城区01","东城区02","东城区03","东城区04"); 29 cityArr[1]=new Array("西城区01","西城区02","西城区03","西城区04"); 30 cityArr[2]=new Array("宣武区01","宣武区02","宣武区03","宣武区04"); 31 cityArr[3]=new Array("朝阳区01","朝阳区02","朝阳区03","朝阳区04"); 32 cityArr[4]=new Array("长宁区01","长宁区02","长宁区03","长宁区04"); 33 cityArr[5]=new Array("黄浦区01","黄浦区02","黄浦区03","黄浦区04"); 34 cityArr[6]=new Array("卢湾区01","卢湾区02","卢湾区03","卢湾区04"); 35 cityArr[7]=new Array("徐汇区01","徐汇区02","徐汇区03","徐汇区04"); 36 cityArr[8]=new Array("和平区01","和平区02","和平区03","和平区04"); 37 cityArr[9]=new Array("河东区01","河东区02","河东区03","河东区04"); 38 cityArr[10]=new Array("河西区01","河西区02","河西区03","河西区04"); 39 cityArr[11]=new Array("南开区01","南开区02","南开区03","南开区04"); 40 var eara=document.getElementById("eara").value; 41 var city=document.getElementById("city"); 42 43 var j; 44 if(eara=="dc"){ 45 j=0; 46 } 47 if(eara=="xc"){ 48 j=1; 49 } 50 if(eara=="xw"){ 51 j=2; 52 } 53 if(eara=="cy"){ 54 j=3; 55 } 56 if(eara=="cn"){ 57 j=4; 58 } 59 if(eara=="hf"){ 60 j=5; 61 } 62 if(eara=="lw"){ 63 j=6; 64 } 65 if(eara=="xh"){ 66 j=7; 67 } 68 if(eara=="hp"){ 69 j=8; 70 } 71 if(eara=="hd"){ 72 j=9; 73 } 74 if(eara=="hx"){ 75 j=10; 76 } 77 if(eara=="nk"){ 78 j=11; 79 } 80 city.options.length=1; 81 for(var i=0;i<cityArr[i].length;i++){ 82 83 var cityText=document.createTextNode(cityArr[j][i]); 84 var newNode=document.createElement("option"); 85 newNode.appendChild(cityText); 86 city.appendChild(newNode); 87 88 } 89 } 90 </script> 91 </head> 92 <body> 93 <div align="center" > 94 请选择地址 95 <select id="province" onchange="getEara()"> 96 <option>---请选择---</option> 97 <option value="bj">北京</option> 98 <option value="sh">上海</option> 99 <option value="tj">天津</option> 100 </select> 101 <select id="eara" onchange="getCity()"> 102 <option>---请选择---</option> 103 </select> 104 <select id="city"> 105 <option>---请选择---</option> 106 </select> 107 </div> 108 </body> 109 </html>