JS 二级下拉列表

最新推荐文章于 2020-02-13 20:04:25 发布

转载最新推荐文章于 2020-02-13 20:04:25 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dbasy/archive/2009/09/22/1571878.html

文章标签：

#javascript #ViewUI

Code
<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 和两个级联的下拉列表。

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

Code
//一级菜单内容
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];
       }
              }

}

转载于:https://www.cnblogs.com/dbasy/archive/2009/09/22/1571878.html