js三级内联 

  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>

 

posted @ 2017-10-27 21:32  木&子  阅读(231)  评论(0)    收藏  举报