关闭

js-案例:省市连动下拉框

671人阅读 评论(0) 收藏 举报
分类:
  • 最终效果如下:

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述


 - 完整代码如下:

<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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11036次
    • 积分:324
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论