Home/ Questions/Q 8179605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T00:02:23+00:00

<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 () {

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

The above written code is not working when page is loaded for the first time.
i.e
When when page is loaded for the first time Panel1 should be visible.
But it’s not happening.
Only after you do changes in drop down it’s working correctly.

Please advice.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove this:

    Style="display: none;"

    The select is hidden until the change event is executed. If you of some reason need the display:hidden in the style, you can change your javascript instead:

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

});

    it will simply execute the change event when page is loaded.

    • 0