JS 二级下拉列表

<table width="100%" border="0" cellspacing="0" cellpadding="0">
            <html:form  action="/manager/log/logList" method="post"
                onsubmit="return check(this)" styleId="logForm" >
                
                <tr>
            
                    <td width="67" bgcolor="#D9E5F3">开始时间：</td>
                    <td width="70" align="left" bgcolor="#D9E5F3">
                    <input type="text" size="25" id="startTime" name="startTime"
                        onfocus="calendar()" class="required" value="<bean:write name="startTime"/>"/>
                    </td>
                    <td width="23" align="center" bgcolor="#D9E5F3">至</td>
                    <td width="70" align="left" bgcolor="#D9E5F3">
                <input type="text" size="25" id="endTime" name="endTime"
                        onfocus="calendar()" class="required" value="<bean:write name="endTime"/>"/></td>
                
                        <td width="60" bgcolor="#D9E5F3">操作类型：</td>
                        <td width="60" bgcolor="#D9E5F3">
                          <select name="menu1"  onchange="select()">
                                                     </select> 
                                                </td>    
                        <td width="70" bgcolor="#D9E5F3">
                          <select name="menu2">  </select> 

                                                     
                        </td>    
                            <td align="left" bgcolor="#D9E5F3"><input type="submit"
                        name="imageField" class="btn_blue" value="查 询" /></td> 

                </tr>
            </html:form>
        </table>

这部分大致画出了一个table 里面有个form 和两个级联的下拉列表。

<script language="javaScript">

initial_select();
</script>
此时构造页面初始化时,二级下拉框的初始值,在方法initial_select();中，注意同时会用到全局变量

 //一级菜单内容
 var menu1="系统管理|XTGL,配置管理|PZGL,库存管理|KCGL,登记领用|DJLY";
 var menu2="登录系统|XTGL_DLXT,新增员工|XTGL_XZYG,修改员工|XTGL_XGYG,新增部门|XTGL_XZBM,修改部门|XTGL_XGBM,新增角色|XTGL_XZJS,修改角色|XTGL_XGJS@新增实物|PZGL_XZSW,修改实物|PZGL_XGSW,新增礼品包|PZGL_XZLPB,修改礼品包|PZGL_XGLPB,新增优惠|PZGL_XZYH,修改优惠|PZGL_XGYH,新增活动|PZGL_ZXHD,修改活动|PZGL_XGHD@采购入库|KCGL_CGRK,调拨出库|KCGL_DBCK,调拨入库|KCGL_DBRK@礼品登记|DJLY_LPDJ,礼品发放|DJLY_LPFF,礼品回退|DJLY_LPHT,登记删除|DJLY_DJSC,单据更改|DJLY_DJGG";
 var split1=",";
 var split2="@";
 var split3="|";
 var defalut="--请选择--"
 var menu1List=menu1.split(split1);
 var menu2List=menu2.split(split2);
 
 function select(){

   with(document.getElementById("logForm").menu1)
       {
        var content=options[selectedIndex].text;
    
       }
    for(var i=0;i<menu1List.length;i++)
    {  var list = menu1List[i].split(split3);
  
           if(content==list[0])
           { 
               var subMenu2List=menu2List[i].split(split1);
               //alert("zhangdu "+subMenu2List.length);
                 document.getElementById("logForm").menu2.length=subMenu2List.length;
               for(var j=0;j<subMenu2List.length;j++)
                   {
                     var list2=subMenu2List[j].split(split3);
                  
                     with(document.getElementById("logForm").menu2)
                             {
                             //alert("fuzhi  "+list2[0]);
                              options[j].text=list2[0];
                              options[j].value=list2[1];
                              
                               }
                    }
                  
            
              break; 
           }
          
    
    
    }
   
   
  }
  

 
 
 function initial_select(){
     //将下拉框menu1页面初始化时的长度设置好，这个必须设，因为默认的个数是有限的
    document.getElementById("logForm").menu1.length=menu1List.length;

    with(document.getElementById("logForm").menu1)
    {
      for(var i=0;i<menu1List.length;i++)
      {
           var list =menu1List[i].split(split3);
          options[i].text =list[0];
          options[i].value=list[1];
      
       //这里你想让哪个一级菜单作为默认值就在这里设置
         if(i==0)
         {
        
           options[selectedIndex].text=list[0];
           options[selectedIndex].value=list[1];
         }
         
       }
      
      }
//这里默认去了第一个一级菜单关联的二级菜单，这个默认可以改变
      var firstMenu2List=menu2List[0].split(split1);
         var firstMenu2Length=firstMenu2List.length;
        document.LogListForm.menu2.length=firstMenu2Length
    with(document.LogListForm.menu2){
       for(int i=0;i<firstMenu2Length;i++){
        var list=firstMenu2List[i].split(split3);
          options[i].text=list[0];
          options[i].value=list[1];        
       }
              }
      
 }