javascript - jquery 占位符，而 ajax 加载下拉菜单

Question

我有 2 个下拉菜单，一个包含国家/地区列表，另一个包含州/省/自治区/直辖市列表。当有人点击某个国家/地区时，州/省/自治区下拉列表将发生更改以反射(reflect)该国家/地区的下拉列表。

国家/地区下拉列表如下:

<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>

州/省是这样的:

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

显然，当有人更改国家/地区时，州/省也会发生变化，使用以下代码:

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);
}

这一切都工作正常，但实际问题是，当服务器处理请求时，当前所选或默认国家/地区的状态仍然可见。因此，如果有人点击速度非常快，他可以选择墨西哥作为国家/地区，选择阿拉巴马州作为州。

加载状态的 ajax/jquery 脚本 states.php 仅返回选项值，仅此而已。

有没有办法让它在加载时显示:

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

甚至可能将整个框设置为“禁用”以防止有人选择它？

Answer 1

您可以设置下拉列表以在新数据加载时显示等待选项，您可以在发出 ajax 请求之前放置此选项。

document.getElementById('state').innerHTML = '<option value="">Please wait</option>';

您也可以禁用下拉菜单，这样做的好处是它是可逆的(以防请求不成功)

document.getElementById('state').disabled = true;
xmlHttp.onreadystatechange = function() {
    if (this.readyState == 4) {
        document.getElementById('state').disabled = false;
        if (this.status == 200){
            document.getElementById('state').innerHTML = this.responseText;
        }
    }
};