首先在 aspx 的前台檔案中:
<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>
<table>
<tr>
<td height="30" style="width: 214px">合約類型</td>
<td> <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>
</td>
<td> </td>
</tr>
</table>
<asp:Panel ID="Panel1" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel2" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel3" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel4" runat="server" style="display:none" Height="30px" Width="125px">
<asp:Panel ID="Panel5" runat="server" style="display:none" Height="30px" Width="125px">
--------------------------------------------
如果想要在 .CS 檔案中寫 panel 的 css 樣式則需要這樣寫
.aspx.CS
this.Panel3.Style.Add("display", "block");
--------------------------------------------
如果寫成 this.Panel3.Visible = true; 則對前台 style="display:none" 的控制項不起作用。