jQuery SelectedItem Population

Question

У меня есть раскрывающийся список, который заполняется на основе значения другого раскрывающегося списка, используя совершенство jQuery ajaxy. Я делаю это с помощью функции $ (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 на сервере и сохраняйте две поездки туда и обратно. Ваши пользователи это оценят.