の表示/非表示DIV

Question

I私のASP.NETページで、次のドロップダウンを持っている：

<asp:DropDownList ID="selectAttending" runat="server"> 
       <asp:ListItem Value="Select One...">Select One...</asp:ListItem> 
       <asp:ListItem Value="Yes">Yes</asp:ListItem> 
       <asp:ListItem Value="No">No</asp:ListItem> 
      </asp:DropDownList> 

私も次のスクリプトがあります。

$(function(){ 
$("#selectAttending").change(function() { 
ToggleDropdown(); 
}); 
ToggleDropdown(); 
}); 

function ToggleDropdown(){ 
if ($("#selectAttending").val() == "No") { 
    $("#ifAttending").hide(); 
} 
else{ 
    $("#ifAttending").show(); 
} 
}; 

DIVタグを彼らが出席しているかどうかを示したいと思います： #ifAttending

変更時に表示/非表示にする属性を追加する必要がありますか、コードが間違っていますか？

Answer 1

あなたのコードは機能するはずですが、このコードを単純化して試すことができます。私はjQuery toggleメソッドを使用していますが、これは要素を表示/非表示にするブール値のパラメータを取ることに注意してください。

$(function(){ 
    $("#selectAttending").change(function() { 
     $("#ifAttending").toggle(this.value == "Yes") 
    }) 
    .change();//trigger the change event on page load 
}); 

Answer 2

コードは正しく表示されます。クライアントのDropDownListのIDは、naming containersのため、正確にはselectAttendingではありません。

あなたのようなCSSクラス名を使用するか、または構文でクライアントIDを取得することができます。

$("#<%=selectAttending.ClientID%>") 

Answer 3

問題がselectAttendingは、ASPページの背後にあるコードではなくドロップダウンのIDで使用されるコントロールIDであるということですhtmlの要素。

あなたがコントロールのクライアントIDを取得するには、この操作を行う必要があるでしょう：

$(function(){ 
    $("#<%=selectAttending.ClientID%>").change(function() { 
     ToggleDropdown(); 
    }); 
    ToggleDropdown(); 
}); 

function ToggleDropdown(){ 
    if ($("#<%=selectAttending.ClientID%>").val() == "No") { 
     $("#ifAttending").hide(); 
    } 
    else{ 
     $("#ifAttending").show(); 
    } 
}; 

Answer 4

あなたは.NETにあるので、あなたは= "静的のClientIDModeを使用していない限りjqueryの内の識別子は を#selectAttendingされていませんあなたの識別子が.netになっていない場合は、 selectAttending.UniqueID