联动菜单简单案例

Ward_Tian

于 2018-10-17 00:44:34 发布

阅读量623

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Ward_Tian/article/details/83099690

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联动菜单</title>
<script>
   //模拟查询所有的城市
   function loadCities(){
       return [
       ["杭州","宁波","温州"],
       ["济南","青岛","烟台"],
       ["石家庄","保定","唐山"],
       ];
   }
   var cities;
   //页面加载后自动查询所有城市
   //onload是页面加载事件，浏览器加载完页面后自动出发
   window.onload = function(){
       //此处代码在页面加载后执行
       cities = loadCities();
   }
   function chg(){
       //获取下拉选
       var s1= document.getElementById("province");
       //获取选中的省份的序号（value）
       var pindex = s1.value;
       //根据省份序号获取对应城市
       var pcities = cities[pindex];
       console.log(pcities);
       //删除原来的城市，创建并追加新的城市
       var s2 = document.getElementById("city");
   //此方法也可以删除原来的城市
   //   var options= s2.getElementsByTagName("option");
   //   for(var i=option.length;i>0;i--){
   //       s2.removeChild(option[i]);
   //   }
       s2.innerHTML="<option>请选择</option>";//初始化option
       //创建并追加新的城市
       if(pcities){
           for(var i=0;i<pcities.length;i++){
               var opn=document.createElement("option");
               opn.innerHTML=pcities[i];
               s2.appendChild(opn);
           }
       }

   }
</script>
</head>
<body>
   省:
   <select οnchange="chg();" id="province">
       <option value="-1">请选择</option>
       <option value="0">浙江省</option>
       <option value="1">山东省</option>
       <option value="2">河北省</option>
   </select>
   市：
   <select id="city">
       <option>请选择</option>
       <option></option>
       <option></option>
       <option></option>
   </select>

</body>
</html>

Ward_Tian

关注

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&gt; //模拟查询所有的城市 function loadCities(){ return [
复制链接

扫一扫