Question

长话短说我需要隐藏一个下拉列表（ddlGenres），直到用户点击＆＃34;类型＆＃34;在ddlSearchOptions中。为了做到这一点没有回发我做了一个简单的脚本，但为了使这个脚本工作，我需要设置ddlGenres＆＃39;要显示的样式：无。问题是在回发后ddlGenres因为该属性而再次隐藏。

我需要弄清楚如何在回发后保持可见。

    <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

你在change事件中写的条件，也把它放在事件之外。在文档就绪时运行它：

$(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();
        }
    });
});

Answer 2

回答我自己的问题感觉非常好，尽管你的所有帮助都导致了这一点。

我所做的只是添加：

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

您也可以将其用作！IsPostBack语句。

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>

下拉列表：

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

阻止元素隐藏在回发上

2 个答案: