JQuery .Show() doesn't work with server control?

Question

I have 2 html TR that i make them runat="server" & visible="false" and I have a dropdownlist called citiesDropDownList

$(document).ready(function() {
$('#<%=citiesDropDownList.ClientID %>').change(function() { ValidateCity(); });
});

and on change of this dropdownlist i check if the its text equal to a string i show the 2 tr as below

function ValidateCity() {
        if ($('#<%= citiesDropDownList.ClientID %> :selected').text() == identity_CityOther)   {
            $('#<%= otherCityTR.ClientID %>').show();
            $('#<%= areasTR.ClientID %>').show();
        }
        var city = $('#<%= citiesDropDownList.ClientID %>').val();
        return IsValid((city.length != 0), '#<%= cityDiv.ClientID %>', identity_CityRequired);
    }

.show() isn't work at all and i don't the reason .. can any lead me to get the problem ?

FYI : I tried $('#<%= otherCityTR.ClientID %>').show('slow'); and also $('#<%= otherCityTR.ClientID %>').css('visibility', 'visible'); but it doesn't work also ...

Answer 1

visible="false" means it doesn't even get rendered into the page, so your selectors aren't finding any elements.

Instead of visible="false" use style="display: none;" to hide the elements, yet still render them in the page.

Answer 2

If you set visible = "false" on a server control, then the control is not even rendered to the browser. Set display: none instead and then show the control with display: block in your javascript.

Answer 3

Remove the visible=false from the server control as this stops the control being rendered to the page, either set a CSS style with display: none or hide the required controls in javascript.