当用户使用ASP.NET从Web窗体的DropDownList中选择其他控件时，如何显示TextBox

Question

I have asp:DropDownList and my requirement is when user select other from list a TextBox is shown to user. But initially TextBox is hidden.

I write below code to hide TextBox when page is loaded.

txtOtherArea.Attributes.Add("style", "display:none")

But when I try to show this TextBox using JQuery, nothing happened. Below is my JQuery code.

$(function () {
    $("#ddlUserArea").click(function () {
        $("#txtOtherArea").fadeIn("slow");
    });
});

I also try to use show() instead of fadeIn("slow") but there is no option to use show() method.

Then I try below code to hide TextBox initially.

<script type="text/javascript">
        $(function () {
            $("#txtOtherArea").fadeOut(1000);
        });
    </script>

I write above code in head section of Master page. But nothing happened.

I read other topics and question on this forum but don't understand may be because of much complexity. I am new in programming and just need to show TextBox when user select Other from DropDownList . Please help.

Answer 1

Because you are using server side id of control, you should use client side id as shown below.

$(function () {
    $("#ddlUserArea").click(function () {//YOU SHOULD USE .change() instead
        $("#<%=txtOtherArea.ClientID%>").fadeIn("slow");
    });
});

BETTER APPROACH

$(function () {
    var ddl=$("#<%=ddlUserArea.ClientID%>");
    var txt=$("#<%=txtOtherArea.ClientID%>");
    ddl.change(function () {
        if(ddl.val()=="Other"){
            txt.fadeIn("slow");
        }
    });
});

Answer 2

Don't use magic string for id, instead use ClientID generated by asp.net for your controls :

var ddlUserArea = "<%=ddlUserArea.ClientID %>";
var txtOtherArea = "<%=txtOtherArea.ClientID %>";

and for dropdown you have to use change event:

$("#"+ddlUserArea).change(function () {
        $("#"+txtOtherArea).fadeIn("slow");
});