js写三级联动

<!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":'手套'}
]}
];
    function createSel(cts){//传入包含一组类别对象的数组
        //创建select元素，保存在变量sel中
        var sel=document.createElement("select");
        //向sel添加一个新option，设置内容为"-请选择-",值为-1
        sel.add(new Option("-请选择-",-1));
        //遍历cts中的每个类别对象
        for(var i=0;i<cts.length;i++){
            //向sel中添加一个新option，设置内容为当前类别的内容，设置值为当前类别的id
            sel.add(new Option(cts[i].name,cts[i].id));
        }//(遍历结束)
        
        //cts:[{男装,},{女装,},{童装,children:[{sub1},...]
        //                      i-1
        sel.onchange=function(){//this->sel
            //获得当前sel选中项的下标，保存在变量i中
            var i=this.selectedIndex;
            //获得cts中下标为i-1位置的子类型对象,保存在cate中
            var cate=cts[i-1];
            //反复删除category下的最后一个子节点，直到category的最后一个子节点就是当前sel时，退出循环
            while(category.lastChild!=this){
                category.removeChild(category.lastChild);
            }
            if(cate.children){//如果cate有children属性
                //调用createSel，传入cate的children数组作为参数
                createSel(cate.children);
            }
        }

        //将sel追加到id为category的元素中
        category.appendChild(sel);
    }
    window.onload=function(){
        createSel(categories);
    }
</script>
</head>
<body>
    <div id="category"></div>
</body>
</html>
猜你喜欢
