这个jQuery验证代码有什么问题？

Question

代码应该在页面加载时隐藏文本框，并仅在用户选择“其他”时显示它。

<script type="text/javascript">
        $(document).ready(function () {
        $('#ddlMajor').change(function () {
        if ($(this).val() == 'Other') {
                //                $('#txtOther').show();
         $('#txtOther').css('display', 'inline');
         }
        else {
                //                $('#txtOther').hide();
        $('#txtOther').css('display', 'block');
        }

        });

});
</script>

<asp:TextBox runat="server" ID="txtOther" style="display:none;" > </asp:TextBox>

<asp:DropDownList runat="server" ID="ddlMajor">
                 <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
                 <asp:ListItem Value="Management">Management</asp:ListItem>
                 <asp:ListItem Value="Other">Other</asp:ListItem>
</asp:DropDownList>

- SmilingLily

---

您能展示 ASP.NET 代码生成的 HTML 吗？ - Andrew Whitaker

我认为你在ASP:dropdownList中设置的ID与生成的HTML中的ID不同。在像Firebug或IE调试器这样的工具中查看时会得到什么结果？ - Brian Hoover

Display Inline 和 Display Block 都会显示出来。如果您想隐藏它，您可以使用 display none。 - Dismissile

请记住，如果您的ASP.NET代码在主页面或用户控件等中运行，则您给控件的ID可能不是实际输出到页面的ID - .NET通常会添加前缀。 您可以使用clientId属性来插入正确的ID。 - Jacob Mattison

嗨，Dismissile - 这是答案。我需要将显示设置为none。谢谢。 - SmilingLily

Answer 1

由于您正在使用服务器端控件，因此ID将被重新呈现。您可以在JavaScript中放置代码块，但我建议改用类：

<asp:TextBox runat="server" ID="txtOther" style="display:none;" CssClass="txtOther"> </asp:TextBox>

<asp:DropDownList runat="server" ID="ddlMajor" CssClass="ddlMajor">
                 <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
                 <asp:ListItem Value="Management">Management</asp:ListItem>
                 <asp:ListItem Value="Other">Other</asp:ListItem>
</asp:DropDownList>

 $('.ddlMajor').change(function () {
...
});

我认为你的CSS display 属性值不正确。尝试使用以下代码：

 $(document).ready(function () {
        $('.ddlMajor').change(function () {
        if ($(this).val() == 'Other') {
         $('.txtOther').css('display', 'block');
         }
        else {
        $('.txtOther').css('display', 'none');
        }

        });

或者，如果您不想更改标记，请使用ClientID。注意：这仅适用于在.aspx文件中包含JavaScript的情况。

 $(document).ready(function () {
        $('#<%= ddlMajor.ClientID %>').change(function () {
        if ($(this).val() == 'Other') {
         $('#<%= txtOther.ClientID %>').css('display', 'block');
         }
        else {
        $('#<%= txtOther.ClientID %>').css('display', 'none');
        }

        });

- Curtis

---

应该使用 <%= ddlMajor.ClientID %> 等方式来指向你可能需要用于其所用之处的对象，而不是使用 CssClass。 - StefanE

为什么会这样？你有参考资料吗？如果JavaScript包含在.js文件中怎么办？你会怎么做？ - Curtis

如果将JS与aspx文件分离，您仍然可以使用JS变量来设置服务器控件的ID。我的意思是，使用CssClass来解决这个问题可能会在以后需要使用CssClass进行其目的时导致问题。编码人员和网页设计师并不总是同一个人 :) - StefanE

@StefanE，你说得有道理。我有时候忘记了标记已经提交，不能自由更改。谢谢。 - Curtis

Answer 2

你的问题是，当你尝试隐藏文本框时，你将其显示设置为block。JQuery使用display: none属性来隐藏文本框。所以你现在正在覆盖jQuery的隐藏方式。请尝试以下代码：

$(document).ready(function () {
    $('#ddlMajor').change(function () {
        $('#txtOther').css('display', 'inline');
        if ($(this).val() == 'Other') {
            $('#txtOther').show();
        } else {
            $('#txtOther').hide();
        }
    });
});

- jtfairbank

---

这不是唯一的问题。jQuery找不到任何#ddlMajor元素，因为它将在客户端重新呈现。请参见我的答案。 - Curtis

啊，我没意识到 ASP 会重写 id 标签。谢谢你告诉我！ - jtfairbank

Answer 3

您不需要将类作为引用，但由于服务器控件在呈现时会具有不同的ID，因此可以使用内联(<%= ddlMajor.ClientID %>)来获取正确的ID：

例如：

<script type="text/javascript">
    $(document).ready(function () {
      $("#<%= ddlMajor.ClientID %>").change(function () {
        if ($(this).val() == 'Other') {
                $('#<%= txtOther.ClientID %>').show();

         }
        else {
                $('#<%= txtOther.ClientID %>').hide();

        }

        });

    });

- StefanE

---

这并没有考虑到CSS显示的问题，或者#txtOther也将被重新渲染的事实。 - Curtis

使用类作为您的答案中的建议在使用jQuery和ASP.NET时是错误的。我指出了问题，即除非具有正确的ID，否则他拥有的JavaScript代码将永远不会被执行。 - StefanE

我仍然不认为这是对最初问题的正确答案。 - Curtis