Show/Hide TextBox when dropdown selected using jquery not working after postback

See more:

C#

ASP.NET

jQuery

I have a dropdown select (option 1, option 2 and option 3), when i select one of the options i would like a div show and hide that option.
i have jquery function in my source code but after postback it not work.

my code

<script type="text/javascript">


    $(document).ready(function () {

        $('.ddlFilter').change(function () {
            var sel = $(this).val();
            $('#div_date').hide();
            $('#div_subject').hide();
            $('#div_status').hide();

            if (sel === 'Date') {
                $('#div_date').show();
            }
            else if (sel == 'Subject') {
                $('#div_subject').show();
            }
            else if (sel == 'Status') {
                $('#div_status').show();
            }
        });

    }); 

    </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>   

 <div id="select">
            Filter Results by:

            <asp:DropDownList CssClass="ddlFilter"   ID="ddlFilterResultBy" 
                        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> 

            </div>
            <div id="holder">
            <div id="div_date" style="width: 250px; display: none;" class="sectionrowDate">
                Date Range:

               <%-- <uc1:DatePicker ID="dpFromDate"  runat="server"   />
                <uc1:DatePicker ID="dpToDate"  runat="server"  />--%>
            </div>
            <div id="div_subject" style="display: none;" class="sectionrow">
                Subject: 
                <asp:TextBox ID="txtSubject" runat="server" Width="225px" SkinID="Picker"></asp:TextBox>
            </div>

            <div id="div_status" style="display: none;" class="sectionrow">
                Status:

                <asp:DropDownList  ID="ddlStatus" runat="server" Width="152px">
                </asp:DropDownList>

            </div> 
            </div>

            <asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="btnSearch_Click" />
        </div>
         </ContentTemplate>
    </asp:UpdatePanel>

very first time this function work very well but after postback it not work.


How can this be accomplished?