Jquery: display div based on the selection from DropDownList

Question

I have a dropdownlist (asp.net) and when user change the selection and i want to display the div based on the selected from dropdownlist.

i have code here...

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

Updated:

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