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>

<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: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="100px" title="点击打开日期控件" onclick="javascript:calendar.setHook(this)" runat="server" /></td>
          <td width="232" style="height: 25px">止于：<input id="Text2" name="txbFirstDate" readonly="readonly" style="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>&nbsp;
              (个月)</td>
        </tr>
      </table>
    </asp:Panel>