Question

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>

<script type="text/javascript">
   $(function () {
    $('select[id$=ddlCardType]').change(function () {
        if (this.value == -1) {
            $('div[id$=Panel1]').show();
            $('div[id$=Panel2]').hide();
        }
        else {
            $('div[id$=Panel1]').hide();
            $('div[id$=Panel2]').show();
        }
    });

});
</script>

</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem Text="Select" Value="-1" />
    <asp:ListItem Value="1" Text="Text1" />
    <asp:ListItem Value="2" Text="Text2" />
    <asp:ListItem Value="3" Text="Text3" />
    <asp:ListItem Value="4" Text="Text4" />
    <asp:ListItem Value="5" Text="Text5" />
</asp:DropDownList>
<asp:Panel ID="Panel1" runat="server" Style="display: none;">
    Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" Style="display: none;">
    This si panel 2
</asp:Panel>

</form>
</body>
</html>

首次加载页面时，上述编写的代码无法正常工作。即当第一次加载页面时，Panel1应该是可见的。但它没有发生。只有在您进行了更改后，才能正常工作。

请指教。

Answer 1

删除它：

Style="display: none;"

选择被隐藏，直到执行更改事件。如果您出于某种原因需要显示：隐藏在样式中，您可以改为使用javascript：

$(function() {
    $('select[id$=DropDownList1]').change(function() {
        if (this.value == -1) {
            $('div[id$=Panel1]').show();
        }
    }).change();

});

只需在加载页面时执行更改事件。

使用JQuery首次加载页面时，不会显示Panel

1 个答案: