Jquery: affichage div basé sur la sélection de DropDownList

Question

J'ai une liste déroulante (asp.net) et quand l'utilisateur change la sélection et je veux afficher la div basée sur la liste déroulante sélectionnée.

j'ai le code ici ...

<asp:DropDownList ID="ddlFilter" runat="server" Width="221px"> 
     <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
     <asp:ListItem Text="Date" Value="DATE"></asp:ListItem> 
     <asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem> 
     <asp:ListItem Text="Status" Value="STATUS"></asp:ListItem> 
    </asp:DropDownList> 
    &nbsp; 
    <asp:Button ID="btnSearch" Text="Search" runat="server" /> 




    <div id="divDateRangeSearch"> 
     <div style="float: left"> 
      <asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label> 
      <br /> 
      <uc1:DatePicker ID="FromDate" runat="server" /> 
      <uc1:DatePicker ID="ToDate" runat="server" /> 
     </div> 
    </div> 


    <div id="divSearchSubject" > 
     <div style="float: left"> 
      <asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br /> 
      <asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox> 
     </div> 
    </div> 


    <div id="divStatusSearch"> 
     <div style="float: left"> 
      <asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label> 
      <br /> 
      <asp:DropDownList ID="ddStatus" runat="server" Width="152px" > 
      </asp:DropDownList> 
     </div> 
    </div> 

Mise à jour:

<div style="width: 880px; padding-top: 2px; border-bottom: none; 
      height: 28px;"> 
      <asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label> 

      <asp:DropDownList ID="ddlFilter" runat="server" Width="221px"> 
     <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
     <asp:ListItem Text="Date" Value="DATE"></asp:ListItem> 
     <asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem> 
     <asp:ListItem Text="Status" Value="STATUS"></asp:ListItem> 
    </asp:DropDownList> 
      &nbsp; 
       <div id="div_date" style="width:250px; display:none; " class="sectionrowDate"> 
       <div style="float: left"> 
        <asp:Label ID="lblDateRange" runat="server" Text="Date Range" ></asp:Label> 
        <br /> 
        <uc1:DatePicker ID="FromDate" runat="server" /> 
        <uc1:DatePicker ID="ToDate" runat="server" /> 
        </div> 
      </div> 

      <asp:Button ID="btnSearch" Text="Search" runat="server" /> 

Answer 1

$('#ddlFilter').change(function(){ 
    var sel = $(this).val(); 
    if(sel === 'DATE'){ 
    hideAll();// a function to hide all the divs first 
    $('#divDateRangeSearch').show(); 
    } else if(sel === 'SUBJECT'){ 
    ///so on... 
    } 
});