Hidden element, 1 sec delay

I have a div element that I want to hide if the value of the option list is not equal to 1. I'm using the jquery to hide/show the element.

   if ($("#prov").val() == "0") {
       $("#label1").hide();
       $("#list1").hide();
   } else {
       $("#label1").show();
       $("#list1").show();
   }

However, there's always I sec delay before it hides the element if the value is equal to 0. My HTML code is at the beginning and my javascrip/jquery code is at the end because I can't hide/show the element if it hasn't been created yet.

Also, I tried to use the hidden property in CSS but I get the same result.

hidden{
    display: none;
}

Below are the div elements.

<div>
    <label>Location:</label>
    <div>
        <select class="form-control" id="label1">
            <option label=""></option>
            <option value="1">Canada</option>
            <option value="0">Other</option>
        </select>
    </div>
</div>

<div>
    <label id="list1">Province:</label>
    <div>
        <select>
            <option value=""> </option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NT">Northwest Territories</option>
            <option value="NS">Nova Scotia</option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="YT">Yukon</option>
        </select>
    </div>
 </div>

Thanks.