关闭

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

556人阅读 评论(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

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9225次
    • 积分:307
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:3篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论