3.29省市区

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
   *{margin:0 0;}
   div{margin:100px auto;
    width:300px;}
  </style>
</head>
<body>
   <div>
    <form>
      <select name="sele" id="sheng">
       <option value="">请选择省会</option>
       <option value="0">0</option>
       <option value="1">1</option>
       <option value="2">2</option>
      </select>
      <select name="sele" id="shi">
       <option value="">请选择城市</option>
      </select>
      <select name="sele" id="qu">
       <option value="">请选择地区</option>

</select>

    </form>
    <script type="text/javascript">
    var myAdd=[0,
         [
          10,
         [101,102,103],
          20,
            [201,202,203],
          30,
            [301,302,303],
         ],
         1,
            [
             11,
               [111,112,113],
             12,
               [121,122,123],
             13,
               [131,132,133],
            ],
         2,
            [
             21,
               [211,212,213],
             22,
               [221,222,223],
             23,
               [231,232,233],
            ],
         ];
     console.log(myAdd);
    // console.log(myAdd[0]);
    // console.log(myAdd[2]);
    // console.log(myAdd[4]);

//console.log(myAdd[1].length);

    // console.log(myAdd[1][0]);
    // console.log(myAdd[1][2]);
    // console.log(myAdd[1][4]);
    //
    // console.log(myAdd[3][0]);
    // console.log(myAdd[3][2]);
    // console.log(myAdd[3][4]);
    //
    // console.log(myAdd[5][0]);
    // console.log(myAdd[5][2]);
    // console.log(myAdd[5][4]);

    // console.log(myAdd[1][1][0]);
    // console.log(myAdd[1][1][1]);
    // console.log(myAdd[1][1][2]);

    // console.log(myAdd[1][3][0]);
    // console.log(myAdd[1][3][1]);
    // console.log(myAdd[1][3][2]);

    // console.log(myAdd[1][5][0]);
    // console.log(myAdd[1][5][1]);
    // console.log(myAdd[1][5][2]);

    // console.log(myAdd[3][1][0]);
    // console.log(myAdd[3][1][1]);
    // console.log(myAdd[3][1][2]);

    // console.log(myAdd[3][3][0]);
    // console.log(myAdd[3][3][1]);
    // console.log(myAdd[3][3][2]);

    // console.log(myAdd[3][5][0]);
    // console.log(myAdd[3][5][1]);
    // console.log(myAdd[3][5][2]);

    // console.log(myAdd[5][1][0]);
    // console.log(myAdd[5][1][1]);
    // console.log(myAdd[5][1][2]);

    // console.log(myAdd[5][3][0]);
    // console.log(myAdd[5][3][1]);
    // console.log(myAdd[5][3][2]);

    // console.log(myAdd[5][5][0]);
    // console.log(myAdd[5][5][1]);
    // console.log(myAdd[5][5][2]);
    window.onload=function()
        {
         function getarea(id){
            return document.getElementById(id);
         }
         var sheng=getarea('sheng');
         var shi=getarea('shi');
         var qu=getarea('qu');

         sheng.onchange=function(){
            //console.log(myAdd.length);
            for(var i=0;i<myAdd.length;i+=2){
             if(myAdd[i]==this.value){
             printShi(i);
             printQu(i,1);
             }
             //console.log(i);
            }
         }

         shi.onchange=function(){
            for(var i=0;i<myAdd.length;i+=2){
             for(var j=0;j<myAdd.length;j+=2){
               if(myAdd[i+1][j]==this.value)
               printQu(i,j+1);
               //console.log(myAdd[i+1][j]);
             }
            }

}

         function printShi(i){
            shi.innerHTML='<option value="'+myAdd[i+1][0]+'">'+myAdd[i+1][0]+'</option>';
            // console.log('<option value="'+myAdd[i][0]+'">'+myAdd[i][0]+'</option>');
            //console.log(myAdd[i+1]);
            for(var j=2,len=myAdd[i+1].length;j<len;j+=2){
               var shioption=document.createElement("option");
               shioption.setAttribute('value',myAdd[i+1][j]);
               shioption.innerHTML=myAdd[i+1][j];
               shi.appendChild(shioption);

            }

         }
         function printQu(i,y){
            qu.innerHTML='<option value="'+myAdd[i+1][y][0]+'">'+myAdd[i+1][y][0]+'</option>';
            console.log(myAdd[i+1].length);
            j=i+1;
            for(var m=1,len=3;m<len;m++){
               var quoption=document.createElement("option");
               quoption.setAttribute('value',myAdd[j][y][m]);
               quoption.innerHTML=myAdd[j][y][m];
               qu.appendChild(quoption);
            }

}

        }
    </script>
   </div>

</body>
</html>

相关文章