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

Question

The code is supposed to hide the textbox when the page loads and make it visible only when the user selects Other.

<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

As you are using a Server Side control the ID will be re-rendered. You could put code blocks in your javascript, but I would recommend using a class instead:

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

I also believe your CSS display values are incorrect. Try this:

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

        });

---

Or if you do not want to change Markup, use ClientID . Note: This will only work when youve got the javascript contained within the .aspx file

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

        });

Answer 2

Your issue is that when you try to hide the textbox, you set its display to block . JQuery uses the display property display: none to hide the textbox. So what you're doing is overwriting jQuery's hiding. Try this:

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

Answer 3

You don't need to use classes as references but as the server controls will have a different ID when rendered you can use inline( <%= ddlMajor.ClientID %> ) instead to get the proper ID:

For example:

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

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

        }

        });

    });