Question

我正在使用以下代码填充带有城市的第二个选择框：

  jQuery('#country').live("change", function(){ 
    populateCityListBox();
    alert(jQuery("select#city").val());
  }); 

- - - -  - - - - - - - - - - -

  function populateCityListBox()
  {

    jQuery.get("my/path/myfile.php", { instance: 'getCitiesByCountry', countryID: jQuery("select#country").val(), brandID: $_GET('brandID') },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            if (i == 0)
              options += '<option selected value="' + data[i].city + '">' + data[i].city + '</option>';
            else
              options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';

          }

          jQuery("select#city").append(options);
      },"json");
  }

填充列表框可以正常工作。但警报不会输出新城市（在国家选择之后）。这可能是一个绑定问题吗？我以为使用$ .live解决了这一切。

在城市列表框更新之前，似乎会触发alert（）。我做错了什么？

Answer 1

史蒂文，你说得对。代码：

alert(jQuery("select#city").val());

在您的get（）请求返回之前执行，并返回来自服务器的响应。您为填充城市列表而定义的回调函数在收到响应之前不会运行。

尝试创建另一个功能来显示你的警报，并从get的回调中调用它：

  jQuery('#country').live("change", function(){ 
    populateCityListBox();
  }); 

function showCity()
{
    alert(jQuery("select#city").val());
}

- - - -  - - - - - - - - - - -

  function populateCityListBox()
  {

    jQuery.get("my/path/myfile.php", { instance: 'getCitiesByCountry', countryID: jQuery("select#country").val(), brandID: $_GET('brandID') },
      function(data)
      {
          var options = '';
          for (var i = 0; i < data.length; i++) {
            if (i == 0)
              options += '<option selected value="' + data[i].city + '">' + data[i].city + '</option>';
            else
              options += '<option value="' + data[i].city + '">' + data[i].city + '</option>';

          }

          jQuery("select#city").append(options);
          showCity();
      },"json");
  }

Answer 2

您正在使用AJAX调用来填充城市列表框。除非您更改了默认值，否则调用是异步的;因此，无法保证在调用alert（）之前完成它。

最好在成功的回调中调用alert（），并将其作为第三个参数传递给get（）：

jQuery.get(your_url, your_data, function() {alert('...');})

Answer 3

这段代码对我来说非常有用。我做的唯一修改是在执行追加之前添加.empty，如下所示：

function populateCityListBox()
 {

  jQuery("select#city").empty();
 ....

否则，如果更改选择，新值将附加到现有值。

填充第二个选择框 - 绑定问题

3 个答案: