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选择器，要么使用唯一的类名来选择控件。

Answer 2

$（“＃QuestnType”）。val（）给出下拉选项的值（在本例中为3）。

您应该测试$（“＃QuestnType”）。val（）===“3”（首选）或$（“＃QuestnType”）。text（）===“Open Ended”。

Answer 3

它不起作用，因为$（“＃QuestnType”）。val（）从value属性中提取值。只需将其更改为if ($("#QuestnType").val() == 3)即可。

Answer 4

为了扩展Jason的答案，您可以使用以下内容确保您的javascript将引用服务器控件的正确ID，即使它包含在另一个服务器控件中：

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

Answer 5

如果您确信您的控件ID不会更改（由于母版页为它们添加前缀），那么这种方法中的这种方法可以提供帮助：

http://jsfiddle.net/dhoerster/MZKBJ/1/

基本上，这是javascript的样子：

$(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生成的ID不同。您应该设置ClientIdMode =“Static”以确保“QuestnType”是呈现给页面的ID。

使用JQuery显示/隐藏div，具体取决于下拉列表选择的值

6 个答案: