jquery placeholder while ajax loads dropdown menu

I have a 2 dropdowns, one with a list of countries and one with a list of states. When someone clicks a country, the state dropdown is changed to reflect the ones for that country.

The country dropdown is like this:

<select name="country" id="country" onChange = "states_dropdown(this, 0)">
  <option value="001" >United States</option>
  <option value="002" >Canada</option>
  <option value="003" >Mexico</option>
</select>

And the states/provinces like this:

<select name="state" id="state">
  <option value="00101" >Alabama</option>
  <option value="00102" >Alaska</option>
  <option value="00103" >Arizona</option>
</select>

Obviously, the states change when someone changes the country, with this code:

function state_box(country, user_id) {
   var xmlHttp = GetXmlHttpObject();

   if (xmlHttp == null) {
      alert("Browser does not support HTTP Request");
      return;
   }

   var url = relative_path + 'ajax/states.php';
   var action = url + '?country_id=' + country.value;

   xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
         document.getElementById('state').innerHTML = xmlHttp.responseText;
      }
   };
   xmlHttp.open("GET", action, true);
   xmlHttp.send(null);
}

This all works fine, but the actual problem is that while the server processes the request, the states of the currently selected or default country remain visible. So if someone clicks really fast, he could choose Mexico as the country and Alabama as the state.

The ajax/jquery script states.php that loads the states returns just the option values, that's all.

Is there a way to make it so that while it's loading, it would display:

<option value="">Please wait</option>

and maybe even make the entire box as "disabled" to prevent someone from selecting it?