js写的三级菜单

大雄z · 发表于 2018-3-15 11:25

学习使用的练习三级菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select class="provinces">
      <option>请选择省份</option>
</select>

<select class="citys">
      <option>请选择城市</option>
</select>

<select class="town">
      <option>请选择镇或区</option>
</select>

<script>
      data={'河北':{'廊坊':['廊1','廊2'],'石家庄':['石1']},'湖南':{'长沙':['长1'],'株洲':['株1']},"广东":{'广州':['广1'],'深圳':['深1']}}
      var ele_pro = document.getElementsByClassName('provinces')[0];
      var ele_city = document.getElementsByClassName('citys')[0];
      var ele_town = document.getElementsByClassName('town')[0];

      for (var i in data){
         // 创建省份标签
         var ele_pro_option=document.createElement('option');
         // 给标签增加html内容
         ele_pro_option.innerHTML=i;
         // 将标签附加到select标签中
         ele_pro.appendChild(ele_pro_option);
      }

      // 选择省份之后,获取城市的列表
      var ele_Citys;

      // 选择省份级联城市
      ele_pro.onchange = function () {
         // 此处的this得出的是select的省份options
         // console.log(this);

         // this 选中省份的select标签
         var p=this.options[this.selectedIndex].innerHTML;
         // 得出省份
         ele_Citys=data[p];
         // console.log(ele_Citys)

         // 打印出城市信息
         // console.log(ele_Citys);

         // 当省份重新点击的时候,将option直接设制成1,重新选择
         ele_city.options.length=1;
         if (ele_city.options.length == 1){
            ele_town.options.length=1
         }

         // 循环城市列表
         for (var i in ele_Citys){
            var ele_city_option = document.createElement('option');
            ele_city_option.innerHTML=i;
            ele_city.appendChild(ele_city_option);
         }
      }

      //选择城市级联镇或区
      ele_city.onchange = function () {
         // 查看城市的select标签
         // console.log(this)
         var ele_town_chiose = this.options[this.selectedIndex].innerHTML;
         console.log('ele_city_chiose: '+ele_town_chiose);

         var town_chiose=ele_Citys[ele_town_chiose];
         console.log(town_chiose)
         ele_town.options.length=1
         for (var i in town_chiose){
            console.log(town_chiose[i])
            var ele_town_create=document.createElement('option')
            ele_town_create.innerHTML=town_chiose[i];
            ele_town.appendChild(ele_town_create)
         }
      }

</script>
</body>
</html>

netCheney · 发表于 2018-3-15 13:28

大雄z 发表于 2018-3-15 13:14
还在学，不知道API昨调

很多API返回的都是json格式的数据，读出来都是数组形式的，跟你定义的data格式差不多，你可以找一些解析json的资料看一下，很简单的

netCheney · 发表于 2018-3-15 12:33

很精简，把data换成网络上的API就能得到全国的三级联动信息了，html部分个人感觉给每个select加个ID，这样js获取的时候不需要再从数组中读取第一个了，可能会更有效率一点

hunteraa · 发表于 2018-3-15 11:42

可否动态，随鼠标列出数据菜单？

xiaofeng0521 · 发表于 2018-3-15 11:44

加两个事件就能动态了

Marcel · 发表于 2018-3-15 11:48

感谢分享，收藏了

红盟黑洞 · 发表于 2018-3-15 12:21

emm 并不是很懂，凑热闹

itfive · 发表于 2018-3-15 12:22

提示: 作者被禁止或删除内容自动屏蔽

妖颜惑众 · 发表于 2018-3-15 12:26

给你点个赞

大雄z · 发表于 2018-3-15 13:14

netCheney 发表于 2018-3-15 12:33
很精简，把data换成网络上的API就能得到全国的三级联动信息了，html部分个人感觉给每个select加个ID，这样j ...

还在学，不知道API昨调

帐号		自动登录	找回密码
密码			注册[Register]

itfive itfive 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	itfive 发表于 2018-3-15 12:22 提示: 作者被禁止或删除内容自动屏蔽

	回复支持举报

[其他转载] js写的三级菜单