联动菜单设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50927285

<span style="font-size:18px;"><!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 createSelect(arr){
		//创建select元素
		var select=document.createElement("select");
		//新建option元素，设置内容为-请选择-，值为-1，直接追加到select中
		select.add(new Option("-请选择-",-1));
		//遍历arr中每个商品类别对象
		for(var i=0;i<arr.length;i++){
			//新建option元素，设置内容为当前商品类型的name属性，值为id属性，直接追加到select中
			select.add(new Option(arr[i].name,arr[i].id));
		}//(遍历结束)
		//绑定onchange事件处理函数
		select.οnchange=function(){
			//删除当前select之后的所有select元素
			//当父元素的最后一个子元素就是当前select时，就停止删除
			while(this.parentNode.lastElementChild!=this){
				//移除父元素下最后一个子元素
				this.parentNode.removeChild(
					this.parentNode.lastElementChild
				);
			}
			//获取选中项的下标，保存在变量index中
			var index=this.selectedIndex;
			if(index>0){//如果index>0
				//获取arr中index-1位置的商品类型对象保存在cate中
				var cate=arr[index-1];
				//如果cate的children有效，说明当前类别有下级类别
				if(cate.children){
					//就调用createSelect方法，创建右侧select元素,传入cate的children数组作为参数
					createSelect(cate.children);
				}
			}
		}

		//将select元素追加到id为category的div下
		category.appendChild(select);
	}
	window.οnlοad=function(){
		createSelect(categories);
	}
</script>
</head>
<body>
	<div id="category"></div>
</body>
</html>
</span>