ドロップダウンリストの選択値に応じてJQueryでdivを表示/非表示

Question

私は既存の質問を読んだが問題は解決しないようだ。 ドロップダウンリストで "Open Ended"オプションが選択されている場合、div "answer_wrapper"を非表示にしたいと考えています。

私はいくつかのコードを書いていますが、ソリューションを実行すると、ドロップダウンリストで[Open Ended]オプションを選択しても何も起きないようです。

ご協力いただければ幸いです。

$(function() 
{ 
    $("#QuestnType").change(function() 
    { 
     ToggleDropdown(); 
    }); 
    ToggleDropdown(); 
}); 
function ToggleDropdown() 
{ 
    if ($("#QuestnType").val() == "Open Ended") 
    { 
     $("#answer_wrapper").hide(); 
    } 
    else 
    { 
     $("#answer_wrapper").show(); 
    } 
}; 

ドロップダウンリスト

<asp:DropDownList runat="server" ID="QuestnType" CssClass="form"> 
    <asp:ListItem Value="1">Check Boxes</asp:ListItem> 
    <asp:ListItem Value="2">Drop Down</asp:ListItem> 
    <asp:ListItem Value="3">Open Ended</asp:ListItem> 
    <asp:ListItem Value="4">Radio Buttons</asp:ListItem> 
</asp:DropDownList> 
<div id="answer_wrapper"> 
    some code here 
</div> 

はどこで間違ったんですか？

Answer 1

"オープンエンド" はテキストで、値の値は、サーバーのIdsということであることに注意する3

if ($("#QuestnType").val() == 3) ... 

または

if ($("#QuestnType").text() == "Open Ended") ... 

一つの他の事である！=クライアントIDです。ドロップダウンが別のサーバーコントロール内に存在する場合、クライアントIDは醜い自動生成WebフォームクライアントIDになります。クライアントIDをjqueryセレクタに挿入するか、一意のクラス名を使用してコントロールを選択します。

Answer 2

$（ "＃QuestnType"）val（）は、ドロップダウンオプション（この場合は3）の値を返します。

$（ "＃QuestnType"）のval（）=== "3"（推奨）または$（ "＃QuestnType"）のいずれかをテストする必要があります。

Answer 3

$（ "＃QuestnType"）。val（）はvalue属性から値を取得します。ちょうどそれをif ($("#QuestnType").val() == 3)に変更するとうまくいくでしょう。

Answer 4

ジェイソンの答え時に展開するには、あなたのjavascriptのは、それが別のサーバーコントロールに含まれていた場合でも、サーバーコントロールの正しいIDを参照することを確認するために、以下を使用することができます。

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

Answer 5

あなたがしている場合は、あなたのコントロールIDが（原因マスターページにそれらを接頭辞に）変更されないことを保証し、そしてこのフィドルでこのタイプのアプローチは助けることができます。

基本的にhttp://jsfiddle.net/dhoerster/MZKBJ/1/

は、ここジャバスクリプトは次のようになります。

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

    if ($("#QuestnType").val() === "3") 
    { 
     alert($('#QuestnType').val()); 
     $("#answer_wrapper").hide(); 
    } 
    else 
    { 
     alert($('#QuestnType').val()); 
     $("#answer_wrapper").show(); 
    } 
}; 

Answer 6

あなたのJSで使用しているIDは、asp.netによって生成されたものと異なると思います。 "QuestnType"がページにレンダリングされたIDであることを確認するには、ClientIdMode = "Static"を設定する必要があります。