jQuery SelectedItem种群

Question

我有一个下拉框，它根据另一个下拉框的值填充自身，使用jQuery的ajaxy drop。我使用$(.ready)文档函数完成此操作，下面是相关代码...

$(document).ready(function() {
  populateFirstDropDownBox();

  $("#firstBox").change(function() {
    populateSecondDropDownBox($("#firstBox option:selected").val());
  }); 

  // Do this on initial page load to populate second box
  populateSecondDropDownBox($("#firstBox option:selected").val());
});

这在Firefox和IE中很有效，但在Chrome中就不行了。Chrome似乎没有立即填充第一个下拉框，因此$("#firstBox option:selected").val()最终无法解析。

确保Chrome已填充下拉列表的最佳方法是什么？

编辑:添加了更多内容

function populateFirstDropDownBox() {
  $.post("ajax/getFirstBox", function(json) {
    var options = makeOptionList(json);
$("#firstBox").html(options);
$("#firstBox").triggerHandler("change");
  })
}

function populateSecondDropDownBox(firstBox) {

  $.post("ajax/getSecondBox", {firstBox: firstBox}, function(json) {
    var options = makeOptionList(json);
$("#secondBox").html(locationOptions);
$("#secondBox").triggerHandler("change");
  })
}

function makeOptionList(json) {
  data = eval(json);
  var options = "";

  for (var optIndex = 0; optIndex < data.length; ++optIndex) {
    options += "<option value='" + data[optIndex].value + "'>" + data[optIndex].key + "</option>"
  }

  return options;
}

Answer 1

删除此命令：

// Do this on initial page load to populate second box
populateSecondDropDownBox($("#firstBox option:selected").val());

由于以下代码：

$("#firstBox").triggerHandler("change")     

一旦加载了第一个dropdown就会触发它。

更好的是，在服务器上的HTML中填充您的下拉列表，并节省两次往返。你的用户会喜欢它的。