第一次使用JQuery加載頁面時未顯示面板

<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應該是可見的。但它沒有發生。只有在更改下拉菜單後，它才能正常工作。第一次使用JQuery加載頁面時未顯示面板

請指教。

來源

2012-07-03 palak mehta

刪除此：

Style="display: none;"

的選擇，直到執行更改事件被隱藏。如果由於某些原因，需要顯示：隱藏在款式，你可以改變你的JavaScript來代替：

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

});

加載頁面時，它會簡單地執行變更事件。

來源

2012-07-03 10:26:02 aaberg

喲，只是一個簡單的問題 - 即使它的ID = Panel1'或這===''div [id $ = Panel1]''做什麼？將'.net'使其成爲動態ID？ '：）' –

@aaberg：當我刪除Style =「display：none;」時，它同時顯示兩個面板，這不是我的要求。我需要在下拉列表中顯示與選定值對應的面板。 –

@aaberg請看編輯的代碼，因爲有兩個面板。（this.value == -1）{（div [id $ = Panel1]）{（function（）{（'select [id $ = ddlCardType]'）。change（function（）{ if '）.show（）; $（'div [id $ = Panel2]'）。hide（）; } else {（'div [id $ = Panel1]'）。hide（）; $ （'div [id $ = Panel2]'）。show（）; } }）; }）; 當我刪除Style =「display：none;」時，這兩個面板將同時顯示，這不是我的要求。 –

第一次使用JQuery加載頁面時未顯示面板

回答

相關問題