0 
<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 应该是可见的。但它没有发生。只有在您对下拉菜单进行更改后，它才能正常工作。

请指教。

4

1 回答 1

3

删除这个：

Style="display: none;"

在执行更改事件之前，选择是隐藏的。如果您出于某种原因需要 display:hidden 在样式中，您可以更改您的 javascript：

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

});

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

于 2012-07-03T10:26:02.603 回答