js-案例:省市連動下拉框

  • 最終效果如下:

這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述


 - 完整代碼如下:

<html>
 <head>
  <style type="text/css">

  </style>
  <title>Document</title>
 </head>
 <body>
   <select id="country" onchange="add1(this.value);">
    <option value="0">請選擇··</option>
    <option value="中國">中國</option>
    <option value="美國">美國</option>
    <option value="日本">日本</option>
    <option value="德國">德國</option>
   </select>

   <select id="city">

   </select>

   <script type="text/javascript">
   var array=new Array(4);
      array[0]=["中國","北京","青島","德州","天津"];
      array[1]=["美國","紐約","華盛頓","底特律","休斯頓"];
      array[2]=["日本","大阪","東京","廣島","長崎",];
      array[3]=["德國","慕尼黑","柏林","狼堡"];
   function add1(value){

   var city1=document.getElementById("city");
   var option1=city1.getElementsByTagName("option");
     for(var t=0;t<option1.length;t++)
       {
         op2=option1[t];
         city1.removeChild(op2);
         t--;
       }
     for(var i=0;i<array.length;i++)
       {
           var arr=array[i];
           var firstvalue=arr[0];
           if(arr[0]==value)
           { 
              for(var j=1;j<arr.length;j++)
               {
                  var arr2=arr[j];
                  var op=document.createElement("option");
                  var tex1=document.createTextNode(arr2);
                  op.appendChild(tex1);
                  city1.appendChild(op);
               }
           }
       }
   }

 </script>
 </body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章