I have the below HTML which resides inside a modal dialog. As can be seen when it loads then by default it is not visible.

<span runat="server" id="GESiCountrySelection" style="display: none" clientidmode="Static">
    <label>GESi Countries in Scope</label><span style="color: red">*</span>
    <select runat="server" id='GESiCountriesSelection' clientidmode="Static" multiple></select>
</span>

I have another piece of jQuery code which I use for displaying and hiding it based on certain condition.

$(document).on('change', "#Stage", function () {
    if ($('#recordTypeGES').text() == "True") {
        if (this.value == "Closed Won") {
            $("#GESiCountrySelection").show();
        }
        else {
            $("#GESiCountrySelection").hide();
        }
    }
});

So when another dropdown inside the modal changes its value I catch that event and hide or display the above HTML element. But even after its hitting the JavaScript code and passing through .show or .hide it is not changing the state.

The strange thing is if I do a full refresh of the page then it starts working which means it catches the dropdown change event and shows or hides the HTML element. I have an update panel inside the page so when I change the state of the page it doesn't post back and does not do a full refresh. Not sure if that is messing something up.