Stop element from hiding on postback

Question

Long story short I need to have one dropdownlist (ddlGenres) hide until the user clicks "Genre" in ddlSearchOptions. To do this without a postback I made a simple script but in order for this script to work I needed to set ddlGenres' style to display:none. The problem is that after a postback ddlGenres hides again because of that property.

I need to figure out how to keep it visible after a postback.

    <script type="text/javascript">
    $(document).ready(function () {
        $('#ddlSearchOptions').change(function (e) {
            e.p
            if (this.value == "Genre") {
                $('#ddlGenres').show();
            }
            else {
                $('#ddlGenres').hide();
            }
        });
    });
</script>

<div class="jumbotron">
    <h1>Find a book...</h1>
    <p>
        <asp:TextBox ID="txtFindBook" runat="server" CssClass="DefaultPageSearchBox"></asp:TextBox>

        <asp:DropDownList ID="ddlSearchOptions" ClientIDMode="Static" runat="server">
            <asp:ListItem>Keyword</asp:ListItem>
            <asp:ListItem>Title</asp:ListItem>
            <asp:ListItem>Author</asp:ListItem>
            <asp:ListItem>Genre</asp:ListItem>
        </asp:DropDownList>

        <asp:DropDownList ID="ddlGenres" runat="server" style="display:none" ClientIDMode="Static"></asp:DropDownList>

        <asp:Button ID="btnFindBook" runat="server" Text="Search" OnClick="btnFindBook_Click" Height="36px"  />

    <p>Enter your search terms in the box above, then click "Search" to begin your search.</p>
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>

Answer 1

It feels so good to answer my own question though all of your help has led up to this.

What I did was simply add this:

if(<%=(Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}

You can also use this as a !IsPostBack statement.

if(<%=(Not Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}

JavaScript:

<script type="text/javascript">
    $(document).ready(function ()
    {
        //check "ddlSearchOptions" initial value
        if ($('.search-optins').value == "Genre")
        {
            $('.genre-list').show();
        }
        else
        {
            $('.genre-list').hide();
        }

        //subscribe event handler
        $('.search-optins').change(function (e)
        {
            e.p
            if (this.value == "Genre")
            {
                $('.genre-list').show();
            }
            else {

                $('.genre-list').hide();
            }
        });

        if(<%=(Page.IsPostBack).ToString().ToLower()%>){$('.genre-list').show();}
    });
</script>

Drop Down Lists:

        <asp:DropDownList ID="ddlSearchOptions" CssClass="search-optins" ClientIDMode="Static" runat="server">
            <asp:ListItem>Keyword</asp:ListItem>
            <asp:ListItem>Title</asp:ListItem>
            <asp:ListItem>Author</asp:ListItem>
            <asp:ListItem>Genre</asp:ListItem>
        </asp:DropDownList>

        <asp:DropDownList ID="ddlGenres" CssClass="genre-list" runat="server" ClientIDMode="Static"></asp:DropDownList>

Answer 2

The condition you're writing in change event, just put it outside the event too. To run it on document ready:

$(document).ready(function () {
    //check "ddlSearchOptions" initial value
    if ($('#ddlSearchOptions').value == "Genre") {
        $('#ddlGenres').show();
    }
    else {
        $('#ddlGenres').hide();
    }

    //subscribe event handler
    $('#ddlSearchOptions').change(function (e) {
        e.p
        if (this.value == "Genre") {
            $('#ddlGenres').show();
        }
        else {
            $('#ddlGenres').hide();
        }
    });
});