how can I set visible back to true in jquery

I am using the following code to hide a dropdown box:

  <asp:DropDownList ID="test1" runat="server" DataSourceID="dsTestType" CssClass="maptest1" visible="false"
   开发者_StackOverflow中文版 DataValueField="test_code" DataTextField="test_desc" AppendDataBoundItems="true" >
    <asp:ListItem></asp:ListItem>
  </asp:DropDownList>   

Somehow I try to show this dropdown by using the following code, but this is just not working for me. Anyone know why?

$("#test1").show();

Depends on how you hid it.

If you used the CSS visibility value then

$('#test1').css('visibility', 'visible');

If you used CSS `display'

$('#test1').css('display', 'block'); //or inline or any of the other combos

You might even have made it opacity = 0

$('#test1').css('opacity', '1');

Using ASP.NET's visible="false" property will set the visibility attribute where as I think when you call show() in jQuery it modifies the display attribute of the CSS style.

So doing the latter won't rectify the former.

You need to do this:

$("#test1").attr("visibility", "visible");

Depends, if i remember correctly i think asp.net won't render the html object out when you set visible to false.

If you want to be able to control it from the client side, then you better just include the css value to set it invisible rather than using visible =false.

Remove the visible="false" attribute and add a CSS class that is not visible by default. Then you should be able to reference the dropdown by the correct id, for example:

$("#ctl00_cphTest_test1").show();

Above ID you should serach for in the source of the rendered page in your browser.

How you made it invisible? Try different approach. Use

$("#test1").css('display','none');

When you want to hide that element, and then use

$("#test1").css('display','block');

When you wnat to show it.

Or just move these styles into a class and add/remove class.

Use style="display:none" in your dropdown list tag and in jquery use the following to display and hide.

$("#yourdropdownid").css('display', 'inline');

OR

$("#yourdropdownid").css('display', 'none');

I would be careful with setting the display of the element to block. Different elements have the standard display as different things. For example setting display to block for a table row in firefox causes the width of the cells to be incorrect.

Is the name of the element actually test1. I know that .NET can add extra things onto the start or end. The best way to find out if your selector is working properly is by doing this.

alert($('#text1').length);

You might just need to remove the visibility attribute

$('#text1').removeAttr('visibility');

The problem is that since you are using ASP.NET controls with a runat attribute, the ID of the control is not actually "test1". It's "test1" with a long string attached to it.