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 ="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 > &nbsp;
              (个月) </ td >
         </ tr >
       </ table >
     </ asp:Panel >