Jquery：基於從DropDownList的選擇顯示div

Question

我有一個下拉列表（asp.net），當用戶更改選擇，我想基於從下拉列表中選擇顯示div。

我這裏有代碼...

<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> 

更新時間：

<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... 
    } 
});