JS 二级下拉列表
闲看庭前花开花落,漫随天外云卷云舒
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 和两个级联的下拉列表。<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>
<script language="javaScript">
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];
}
}
}
//一级菜单内容
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];
}
}
}