省市联动

最新推荐文章于 2021-08-06 03:07:55 发布

qq_41586165

最新推荐文章于 2021-08-06 03:07:55 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/qq_41586165/article/details/82084582

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>省市联动</title>
       <script src="js/linkage.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.css"/>
   </head>
   <body>
       <form action="" class="form-inline" method="post">
           <div class="form-group">
               <select name="" id="province" class="form-control">
               <option value="">==请选择省==</option>
           </select>
           </div>
           <div class="form-group">
               <select name="" id="city" class="form-control">
               <option value="">==请选择市==</option>
           </select>
           </div>
       </form>
       <script type="text/javascript">
           var prov=document.getElementById('province');
           var city=document.getElementById('city');
           for(var i in data){
               var p=data[i];
               var opt=document.createElement('option');
               opt.innerText=opt.value= p.name;
               //将创建的节点加入省节点中
               prov.appendChild(opt);
           }
           //为下拉列表绑定事件
           prov.addEventListener('change',function(){
               var pname=this.value;
               let citys;
               for(var i in data){
                   //判断当前遍历的省名称为选中的省名称
                   if(data[i].name===pname){
                       citys=data[i].child;
                       break;
                   }
               }
               //清空当前节点下的字节点（防止和之前查到的追加）
               city.length=0;
               for(var i in citys){
               var p=citys[i];
               var opt=document.createElement('option');
               opt.innerText=opt.value= p.name;
               //将创建的节点加入省节点中
               city.appendChild(opt);
           }
           })
       </script>
   </body>
</html>

qq_41586165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市联动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;省市联动&lt;/title&gt; &lt;script src="js/linkage.js" type="text/
复制链接

扫一扫