Is there a way to dynamically hide a div element based on certain conditions in an option list? I am currently using jQuery for this purpose.
if ($("#prov").val() == "0") {
$("#label1").hide();
$("#list1").hide();
} else {
$("#label1").show();
$("#list1").show();
}
However, I'm facing a delay issue where the element takes a second to hide when the value is 0. The order of my HTML and JavaScript code might be causing this delay as the element needs to be created before it can be hidden/shown.
I also attempted using the hidden property in CSS but encountered the same delayed result.
hidden{
display: none;
}
Below are the examples of 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>
Thank you for your help!