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

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>

而 states/provinces 是这样的：

<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 加载状态 returns 只是选项值，仅此而已。

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

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

甚至可以将整个框设为 "disabled" 以防止有人选择它？

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>

查看此 fiddle 以供参考 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;
        }
    }
};

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

jquery placeholder while ajax loads dropdown menu

javascript

jquery

ajax

xml