I only want to display the textbox when the user selects Yes from the drop-down. I want to keep hidden or not visible by default the textbox but only show when the Yes is selected from the dropdown. Thanks.

<asp:DropDownList ID="ddl1" AutoPostBack="false" CssClass="form-control" runat="server" AppendDataBoundItems="true">
                            <asp:ListItem Text="!!! Please make selection !!!" Value="0"></asp:ListItem>
                            <asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
                            <asp:ListItem Text="No" Value="No"></asp:ListItem>
                        </asp:DropDownList>

here is the textbox

 <asp:TextBox ID="txt1" runat="server"  CssClass="form-control"></asp:TextBox>

I only want to display the textbox when the user selects Yes from the drop-down. I want to keep hidden or not visible by default the textbox but only show when the Yes is selected from the dropdown. Thanks.

<asp:DropDownList ID="ddl1" AutoPostBack="false" CssClass="form-control" runat="server" AppendDataBoundItems="true">
                            <asp:ListItem Text="!!! Please make selection !!!" Value="0"></asp:ListItem>
                            <asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
                            <asp:ListItem Text="No" Value="No"></asp:ListItem>
                        </asp:DropDownList>

here is the textbox

 <asp:TextBox ID="txt1" runat="server"  CssClass="form-control"></asp:TextBox>

• javascript
• c#
• jquery
• asp

Share Improve this question Follow asked Mar 4, 2015 at 21:23 moemoe 5,2494040 gold badges135135 silver badges202202 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you are willing to use jQuery, this is how you would do it.

$(function () {
    $('[id*="ddl1"]').on('change', function () {
        var val = this.value,
            $txtbox = $('[id*="txt1"]');

        if (val === "Yes") {
            // Show text box
            $txtbox.show();
        } else {
            // Hide text box
            $txtbox.hide();
        }
    });
});

Also make sure the textbox is hidden on load.

<asp:TextBox ID="txt1" runat="server" style="display:none;"  CssClass="form-control"></asp:TextBox>

if not use jquery make AutoPostBack="true" and textbox visible false. then doubleclick ddl1 and write in selectedindexchange method c#

if(ddl1.selecteditem==true) 
      txt1.visible=true;
else
      txt1.visible=false;