码迷,mamicode.com
首页 > 其他好文 > 详细

常用的三联动实现

时间:2017-04-05 17:27:22      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:实现   this   children   head   move   add   create   utf-8   事件   

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
	/*使用 HTML DOM 的方式实现联动菜单*/
	var categories=[
    {
      "id":10,
      "name":‘男装‘,
      "children":[
        {"id":101,"name":‘正装‘},
        {"id":102,"name":‘T恤‘},
        {"id":103,"name":‘裤衩‘}
      ]
    },
    {
      "id":20,
      "name":‘女装‘,
      "children":[
        {"id":201,"name":‘短裙‘},
        {"id":202,"name":‘连衣裙‘},
        {
          "id":203,
          "name":‘裤子‘,
          "children":  [
            {"id":2031,"name":‘长裤‘},
            {"id":2031,"name":‘九分裤‘},
            {"id":2031,"name":‘七分裤‘}
          ]
        },
      ]
    },
    {"id":30,"name":‘童装‘,"children":[
      {"id":301,"name":‘帽子‘},
      {"id":302,"name":‘套装‘,"children":[
        {"id":3021,"name":"0-3岁"},
        {"id":3021,"name":"3-6岁"},
        {"id":3021,"name":"6-9岁"},
        {"id":3021,"name":"9-12岁"}
      ]},
      {"id":303,"name":‘手套‘}
    ]}
];
	
</script>
</head>
<body>
	<div id="category"></div>
  <script>
    //查找id为category的div保存在div中
     var div=document.getElementById("category");
    //定义函数createSelect,接收一个数组参数arr
    function createSelect(arr){ 
      //创建一个select
      var sel=document.createElement("select");
      //创建一个option,设置其内容为"-请选择-",值为-1,将option添加到select中
       sel.add(new Option("--请选择--",-1));
      //遍历arr
      for(var i=0;i<arr.length;i++){
        //创建一个option,设置内容为当前元素的name属性,设置value为当前元素的id属性,将新option添加到select中
        sel.add(new Option(arr[i].name,arr[i].id));       
      }//(遍历结束)
      //为sel绑定onchange事件
      sel.onchange=function(){
        //反复:只要当前select不是div的lastChild
        while(this!=div.lastChild)
          //让div删除其lastChild
           div.removeChild(div.lastChild);
        //获得当前选中项的下表-1,保存在i中
        var i=this.selectedIndex-1;
        //如果arr中i位置的商品类别有children
         if(i>=0&&arr[i].children!==undefined)
          //用arr中i位置的商品类别的children数组创建下一个select
          createSelect(arr[i].children);
      
     }
      //将select添加到div中
       div.appendChild(sel);
    }
    createSelect(categories);
  </script>
</body>
</html>

  

常用的三联动实现

标签:实现   this   children   head   move   add   create   utf-8   事件   

原文地址:http://www.cnblogs.com/harlem/p/6669655.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!