jQuery SelectedItem人口

Question

我有一个下拉框，根据另一个下拉列表的值填充自己，使用jQuery的ajaxy goodness。我使用$（document）.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")     

加载第一个下拉列表后会触发它。

更好的是，在服务器上的HTML中填充下拉菜单并保存两次往返。您的用户会很感激。