学步园

首先在 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>&nbsp;<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>&nbsp;</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" 的控件不起作用。