动态二级关联菜单(方法二)
再次感受到没系统看过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的代码的执行顺序,日后有时间再另行学习~