Question

我的情况是这样的：
加载页面时，会加载包含国家/地区的列表框。

通过从下拉列表中选择项目，使用jQuery选择列表框中的国家/地区项目。

现在在列表框中选择了一个国家/地区，我调用了一个检索城市并填充城市列表框的函数。

代码看起来像这样：

  $('#MyDropDownList').change(function() {
      (...) // Selected country is set here

      populateCityListBox();

      //this alert is undefined. Probably because it's triggered before the callback in populateCityListBox()
      alert(jQuery('#cityListBox option[value=Oslo]').val()); 
  });

  function populateCityListBox()
  {
    //Get ID for selected country
    var ctryID = jQuery("select#countryListBox").val();

    jQuery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getCitiesByCountry', countryID: ctryID },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';
          }
          jQuery("select#cityListBox").html(options);

          // This alerts the option text, which also is Oslo
          alert(jQuery('#cityListBox option[value=Oslo]').val()); 
      }, "json");
  }

我的问题是：在运行函数populateCityListBox();后，我无法在城市列表框中检索值。我我能够检索$ .post回调中的值。

触发功能后，如何才能检索值？（我知道它必须做一些东西回调，而其他人运行“实时”......或类似的东西）。

Answer 1

你是对的。由于您的请求是异步，因此代码会继续运行。你可能会替换这样的东西：

$('#MyDropDownList').change(function() {
      (...) // Selected country is set here

      populateCityListBox(function () {
          //this alert should work now
          alert(jQuery('#cityListBox option[value=Oslo]').val());
      });


  });

  function populateCityListBox(callback)
  {
    //Get ID for selected country
    var ctryID = jQuery("select#countryListBox").val();

    jQuery.post("wp-content/themes/storelocator/include/jquery_bll.php", { instance: 'getCitiesByCountry', countryID: ctryID },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';
          }
          jQuery("select#cityListBox").html(options);

          // This alerts the option text, which also is Oslo
          alert(jQuery('#cityListBox option[value=Oslo]').val());
          callback(); 
      }, "json");
  }

将callback作为populateCityListBox的参数，我们可以在change内调用该函数。从本质上讲，它只是一种“修改”的回调：我们只是在回调中执行另一个函数。这使您可以在控制台中独立运行函数populateCityListBox，并且仍然可以使用应用程序逻辑或其他内容。

希望这会有所帮助。

如何使用jQuery检索动态添加的内容？

1 个答案: