在页面加载之前禁用下拉菜单-Javascript

Question

I am having an issue with a couple of my pages.

Essentially I am using JQuery to display followup questions using SlideDown. In addition to this, after clicking the Q2 radio button, we make a JSON request to get the drop down values for Q3.

However if you select the drop down value before the page has completed loading, on selecting the radio on Q2, Q1 dropdown clears back to empty.

I have tried moving all the javascript code to the top to no avail. This is not a problem if the page has completed loading however.

Is there a way to disable or hide the dropdown until the page has fully loaded?

Cheers

Ryan

Answer 1

Working DEMO

Initially set disabled property in HTML:

<select id="dropdown" style="width:200px;" disabled>
    <option value="feedback" name="aft_qst">After Quest</option>
    <option value="feedback" name="aft_exm">After Exam</option>
</select>

on dom ready use following to remove disabled property.

$(document).ready(function(){
    $("#dropdown").prop("disabled", false);  
});

Answer 2

You should use the ready function of jQuery, what you put inside will be executed when the DOM is fullly loaded

$(function() {
  // Enable your dropdown
});

more info:

http://api.jquery.com/ready/