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 に答える