script实现2级连动菜单

从后台传过来2个LIST,分别是2个菜单的全部内容,然后根据2个菜单之间的关系,重新把2个LIST排序,变成我想要的形式的数组.例如:array[1]下面对应的是array[1][1],array[1][2]等等.

<%@ page contentType="text/html; charset=Shift_JIS" %>
<%@ taglib uri="/WEB-INF/tlds/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/tlds/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/tlds/struts-logic.tld" prefix="logic" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="jp.co.srs.biz.webApp.reserve.dto.ReserveDto" %>
<%@ page import="jp.co.srs.biz.webApp.reserve.dto.ReserveListDto" %>
<%@ page import="jp.co.srs.biz.webApp.reserve.dto.ReserveRtypeListDto" %>
<%@ page import="jp.co.srs.biz.webApp.reserve.dto.ReservePlanListDto" %>

<%    ReserveDto dto = (ReserveDto)session.getAttribute("ReserveDto");
    if(dto == null) { dto = new ReserveDto(); }
%>
<%  List lstRtype = (List)session.getAttribute("RtypeList");
    List lstPlan = (List)session.getAttribute("PlanList");
    List lstYears = (List)session.getAttribute("Years");
    String max_page = (String)session.getAttribute("MaxPage");
%>
<html:html>
<th nowrap>お部屋の名称</br></th>
<td>
<select name="rtype_cd" onchange="addOptions(plan_category,rtype_category.value)" id="rtype_category">
   <option value="">====</option>
  <%
   String rtype_cd=(String)session.getAttribute("RtypeCd");
   ReserveRtypeListDto rtype = new ReserveRtypeListDto();%>
  <%if (lstRtype != null) {
         for (int i=0;i<lstRtype.size();i++) {
              rtype = (ReserveRtypeListDto)lstRtype.get(i);%>
             <%if (rtype_cd.equals(rtype.getRtype_cd())) {%>
    <option value="<%=rtype.getRtype_cd()%>" selected><%=rtype.getRtype_nm()%></option>
             <%} else {%>
    <option value="<%=rtype.getRtype_cd()%>"><%=rtype.getRtype_nm()%></option>
            <%}%>
  <%}}%>
</select>
</br></td>
</tr>
<tr>
<th nowrap>ご宿泊プランの名称</br></th>
<td>
    <select name="plan_cd" id="plan_category">
          <option value="">====</option>
          <%
              String strRtype_CD = (String)session.getAttribute("RtypeCd");
              strPlan_CD = (String)session.getAttribute("PlanCd");
              for (int i=0;i<lstRtype.size();i++) {
              ReserveRtypeListDto rcdRtype = (ReserveRtypeListDto)lstRtype.get(i);
              if (strRtype_CD.equals(rcdRtype.getRtype_cd())) {
                   for (int j=0;j<lstPlan.size();j++) {
       ReservePlanListDto rcdPlan = (ReservePlanListDto)lstPlan.get(j);
       if (strRtype_CD.equals(rcdPlan.getRtype_cd())) {
        if (strPlan_CD.equals(rcdPlan.getPlan_cd())) {
    %>
    <option value="<%=rcdPlan.getPlan_cd()%>" selected>
        <%=rcdPlan.getPlan_nm()%>
    </option>
    <%} else {%
    <option value="<%=rcdPlan.getPlan_cd()%>">
        <%=rcdPlan.getPlan_nm()%>
    </option>
    <%
                         }
                       }
                 }
             }
         }
%>
</br></td>
</tr>
</table>
</body>
</html:html>
<script language="JavaScript">
<!--
    var arrRtype  = new Array();
    var arrPlan   = new Array();
    var arrPlanCD = new Array();
    <logic:iterate id="rtypeItem" name="RtypeList" indexId="rtype_index">
        arrRtype[<bean:write name="rtype_index" />] = "<bean:write name="rtypeItem" property="rtype_cd"/>";
    </logic:iterate>
    <%
        for (int i=0; i<lstRtype.size(); i++) {
            ReserveRtypeListDto rcdRtypeList = (ReserveRtypeListDto) lstRtype.get(i);
            int z=0;
    %>
            arrPlan[<%=i%>] = new Array();
            arrPlanCD[<%=i%>] = new Array();
    <%        
            for (int j=0; j<lstPlan.size(); j++) {
                ReservePlanListDto rcdPlanList = (ReservePlanListDto) lstPlan.get(j);
                if(rcdPlanList.getRtype_cd().equals(rcdRtypeList.getRtype_cd())) {
    %>            
                arrPlanCD[<%=i%>][<%=z%>] = "<%=rcdPlanList.getPlan_cd()%>";
                arrPlan[<%=i%>][<%=z%>] = "<%=rcdPlanList.getPlan_nm()%>";
    <%
                z++;
                }
            }
        }
    %>

    function addOptions(dltObj, rtypeCategory) {
        dltObj.innerHTML = "";
        var opt=document.createElement("OPTION");
        opt.value = "";
        opt.text  = "====";
        dltObj.add(opt);
        
        for (var i=0;i<=arrRtype.length;i++){
            if (rtypeCategory == arrRtype[i]) {
                for (var j=0;j<=arrPlan[i].length;j++) {
                    if (arrPlan[i][j] != null) {
                        var opt=document.createElement("OPTION");
                        opt.value = arrPlanCD[i][j];
                        opt.text  = arrPlan[i][j];
                                   if (window.navigator.userAgent.indexOf("MSIE")>0) {
                            dltObj.add(opt);
                        } else {
                            dltObj.appendChild(opt);
                        }
                    }
                }
            }
        }
    }
//-->
</script>