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>

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');
        }

        });

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();
        }
    });
});

Answer 3

您不需要使用类作为引用，但由于服务器控件在呈现时将具有不同的ID，您可以使用内联（＆lt;％= ddlMajor.ClientID％＆gt;）来获取正确的ID：

例如：

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

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

        }

        });

    });

这个jquery验证码有什么问题？

3 个答案: