使用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

"Open Ended"是文本,值为3

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

要么

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

另外需要注意的是Server Ids!= client Ids.如果下拉存在于另一个服务器控件中,则客户端ID将变为丑陋的自动生成的webforms客户端ID.要么将客户端ID注入jquery选择器,要么使用唯一的类名来选择控件.