2

What is the best way to show/hide a textbox or an entire div section based on a users selection from a dropdown? I don't believe its possible with server controls, so I would have to use regular client side HTML controls, correct? Thanks for any input. Would jQuery be the best option for this?

Based on the drop down selection, I want to be able to display the following Div, and by default hide the Div. Thoughts?:

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server" ValidationGroup="ValidationGroupOrder">    </asp:TextBox>

gmatteson
  • 69
  • 4
  • 11

1 Answers1

0

You can do it with server controls the same as simple html controls. You only need to correct set the rendered client IDs of the control. Here is an example: (see the notes on the code for what I do)

function TriggerChange(me)
{
    // get the drop down control
    var cTheDropDown = jQuery("#<%=ddlControl.ClientID%>");

    // find the value of the selected one
    var SelValue = jQuery('option:selected', cTheDropDown).attr('value');

    // now do what you like with it
    if(SelValue == "open")
      jQuery("#divLimitPrice").show();
    else
      jQuery("#divLimitPrice").hide();
}

a shorter version of

function TriggerChange(me)
{
    // get the selected value from the drop down list
    //  and base on it, show or hide your div
    if(jQuery("#<%=ddlControl.ClientID%>").val() == "open")
      jQuery("#divLimitPrice").show();
    else
      jQuery("#divLimitPrice").hide();
}

And on control you add the trigger as:

<asp:DropDownList ID="ddlControl" runat="server" onchange="TriggerChange(this);">
Aristos
  • 66,005
  • 16
  • 114
  • 150
  • Thanks! I am trying to adapt the code and just having a slight issue. – gmatteson Jun 04 '13 at 01:02
  • does that script look correct? heres it the dropdown - – gmatteson Jun 04 '13 at 01:03
  • Here is the Div. Thank you! – gmatteson Jun 04 '13 at 01:03
  • @gmatteson in this `jQuery("#<%=ddPriceType%>");` code you forget the ClientID, `jQuery("#<%=ddPriceType.ClientID%>");`. Do the same and on the rest with ClientID. Now, I can not make it 100% perfect for you. See the code and try to understand what I do - is not just copy/paste. – Aristos Jun 04 '13 at 10:13
  • 1
    Thank you you for the time @Aristo, appreciate it. Very helpful! – gmatteson Jun 09 '13 at 22:57