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

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

Answer 2

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

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

2 个答案: