动态二级关联菜单（方法二）

再次感受到没系统看过JavaScript的痛苦。

非常不适应JavaScript的错误提示……

 

级联菜单的方法一实在太过笨重，所以今天又写了次，稍微改进了点，关键在于JS和Session的传值，之前没学过，所以误区很多，不排除此方法存在BUG。

 

 

<script type="text/javascript">
	/* 一级目录名称  */
	var items =  new Array();
	/* 一级目录id */
	var itemids = new Array();
	/* 二级目录名称 */
	var subitems = new Array();
	/* 二级目录id */
	var subitemids = new Array();
	/* 关键：结合struts2的iterator标签赋值JS数组 */
	/* value="#session.items" 从session中取出目录列表 */
	/* 用JAVA变量i 计数  */
	<s:iterator var="item" value="#session.items">;
		items[<%= i%>]="${item.itemName}";
		itemids[<%= i%>]="${item.id}";
		/* 定义二维数组 */
		subitems[<%= i%>]=new Array();
		subitemids[<%= i%>]=new Array();
		/* value="subItems" 取出item下的subItems列表 */
		<s:iterator var="subitem" value="subItems">;
			subitems[<%= i%>][<%= j%>]="${subitem.subItemName}";
			subitemids[<%=i%>][<%= j%>]="${subitem.id}";
			<%j++;%>
		</s:iterator>;
		<%i++;j=0;%>
	</s:iterator>;
	/* 建立一级目录 */
	for(var n=0;n<items.length;n++){
		document.Question.itemid.options[n]=new Option(items[n],itemids[n]);
	}
	/* 设置默认选项 */
	document.Question.itemid[0].selected = true;
	/* 动态改变二级目录的函数，当一级目录改变(onChange)时，调用此函数 */
	function redirect(x) {
		/* 获得二级目录对象 */
 		var sec = document.Question.subid;
		/* 清空二级目录 */
 		document.Question.subid.options.length=0;
		/* 根据传入参数动态赋值 */
 		for(var i=0;i<subitems[x].length;i++){	
			sec.options[i]=new Option(subitems[x][i],subitemids[x][i]);
		}
 	}
	/* 初始化时手动调用一次显示默认的一级目录对应的二级目录 */
	redirect(document.Question.itemid.options.selectedIndex);
</script>

 

JSP代码

<!--一级菜单  -->
<select id = "itemid" name="itemid" onChange="redire(this.options.selectedIndex)">
</select>
<!--二级菜单  -->
<select name="subid" id="subid" >
</select>

 

关键还是之前不知道JS可以跟标签混合使用，导致数据库——>Action——>JS的过程复杂化了。

同时很疑惑JS的代码的执行顺序，日后有时间再另行学习~