jquery占位符，而AJAX加载下拉菜单

jquery placeholder while ajax loads dropdown menu

本文关键字：加载 下拉菜单 AJAX 占位符 jquery      更新时间：2023-09-26

我有 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 脚本状态.php只返回选项值，仅此而已。

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

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

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

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

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>

在这里查看此小提琴以供参考

相关文章：