DropDownList 前台 onchange 事件js控制显示隐藏元素
<script type="text/javascript">
function change(s)
{
switch(s)
{
case "固定期限":
document.getElementById("Panel1").style.display ="block";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "完成一定任务":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="block";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "非全日制":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="block";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "用工协议":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="block";
document.getElementById("Panel5").style.display ="none";
break;
case "劳务派遣":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="block";
break;
default:
break;
}
}
</script>
function change(s)
{
switch(s)
{
case "固定期限":
document.getElementById("Panel1").style.display ="block";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "完成一定任务":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="block";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "非全日制":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="block";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="none";
break;
case "用工协议":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="block";
document.getElementById("Panel5").style.display ="none";
break;
case "劳务派遣":
document.getElementById("Panel1").style.display ="none";
document.getElementById("Panel2").style.display ="none";
document.getElementById("Panel3").style.display ="none";
document.getElementById("Panel4").style.display ="none";
document.getElementById("Panel5").style.display ="block";
break;
default:
break;
}
}
</script>
<asp:DropDownList ID="ddlcontract" runat="server" Width="131px" onchange="change(this.value)">
<asp:ListItem Value="固定期限">固定期限</asp:ListItem>
<asp:ListItem Value="完成一定任务">完成一定任务</asp:ListItem>
<asp:ListItem Value="非全日制">非全日制</asp:ListItem>
<asp:ListItem Value="用工协议">用工协议</asp:ListItem>
<asp:ListItem Value="劳务派遣">劳务派遣</asp:ListItem>
</asp:DropDownList>
<asp:ListItem Value="固定期限">固定期限</asp:ListItem>
<asp:ListItem Value="完成一定任务">完成一定任务</asp:ListItem>
<asp:ListItem Value="非全日制">非全日制</asp:ListItem>
<asp:ListItem Value="用工协议">用工协议</asp:ListItem>
<asp:ListItem Value="劳务派遣">劳务派遣</asp:ListItem>
</asp:DropDownList>
<asp:Panel ID="Panel1" runat="server" style="display:none" Height="30px" Width="125px">
<table width="650" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="#9999cc">
<tr>
<td width="240" style="height: 25px">计划用工自:<input id="Text1" name="txbFirstDate" readonly="readonly" style="width:100px" title="点击打开日期控件" onclick="javascript:calendar.setHook(this)" runat="server" /></td>
<td width="232" style="height: 25px">止于:<input id="Text2" name="txbFirstDate" readonly="readonly" style="width:100px" title="点击打开日期控件" onclick="javascript:calendar.setHook(this)" runat="server" /></td>
<td width="178" style="height: 25px">
合同签定:<asp:TextBox ID="TextBox12" runat="server" onkeypress="isnum()" Width="47px" MaxLength="4"></asp:TextBox>
(个月)</td>
</tr>
</table>
</asp:Panel>
<table width="650" height="25" border="0" cellpadding="0" cellspacing="0" bgcolor="#9999cc">
<tr>
<td width="240" style="height: 25px">计划用工自:<input id="Text1" name="txbFirstDate" readonly="readonly" style="width:100px" title="点击打开日期控件" onclick="javascript:calendar.setHook(this)" runat="server" /></td>
<td width="232" style="height: 25px">止于:<input id="Text2" name="txbFirstDate" readonly="readonly" style="width:100px" title="点击打开日期控件" onclick="javascript:calendar.setHook(this)" runat="server" /></td>
<td width="178" style="height: 25px">
合同签定:<asp:TextBox ID="TextBox12" runat="server" onkeypress="isnum()" Width="47px" MaxLength="4"></asp:TextBox>
(个月)</td>
</tr>
</table>
</asp:Panel>
posted on 2011-11-03 08:36 tiger8000 阅读(8087) 评论(0) 编辑 收藏 举报