ajax加载下拉菜单时的jquery占位符

Question

我有 2 个下拉列表，一个带有国家列表，一个带有州列表。当有人点击一个国家/地区时，状态下拉菜单会更改以反映该国家/地区的下拉菜单。

国家下拉菜单是这样的：

<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

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;
   var selectBox = document.getElementById('state'); // save the reference to the element

   selectBox.innerHTML = '<option value="">Please wait</option>';
   selectBox.disabled = true;    // disable the select

   xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4) {
          selectBox.innerHTML = xmlHttp.responseText;
          selectBox.disabled = false;  // enable the select
      }
   };
   xmlHttp.open("GET", action, true);
   xmlHttp.send(null);
}

如果responseText 是这样的<option value="00101">city 1</option><option value="00102">city 2</option><option value="00103">city 2</option>

查看此小提琴以供参考here

Answer 2

您可以设置下拉菜单以在新数据加载时显示等待选项，您可以在发出 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;
        }
    }
};