IE8中选择框的奇怪显示错误

Question

我有一个带有邮政编码的ajax调用，在数据库中搜索该邮政编码的城市/县/州选项，然后适当地填充三个选择框。这在Chrome，Firefox和IE9中都很好用。但在IE8中，显示器表现得很奇怪。选择框的第一个群体没有问题。但是，如果您更改了邮政编码，则第二次填充无法正确显示。选择框的DOM内容很好，但下拉内容是重新填充之前的内容。但是，如果您选择其中一个选项，则所选值应为所选选项的值。在第二张图片中，“比佛利山庄”应该显示“华盛顿”，但在选择时，选择框实际显示“华盛顿”。您可以使用向上/向下导航选择框，但下拉显示会中断。

该流程背后的代码基本上是

jQuery('[id$=city]').html("");
jQuery.each(output.city, function(id, city) {
    jQuery("[id$=city]").append(jQuery("<option></option>").val(city).html(city.capitalize()));
});

我已尝试在jsFiddle中重现这个问题，但我一直无法忘记，而且我无法指出问题发生的确切页面，所以我已经包含了正在发生的事情的图片。有任何想法吗？是否有力量刷新或我可以使用的东西？我可以根据需要提供其他信息。

Answer 1

我最终不得不恢复通过非jQuery将选项添加到选择框。无论出于何种原因，这解决了我遇到的问题。

var citySelect = document.getElementById('site.address.city');
jQuery.each(output.city, function(id, city) {
    citySelect.options[citySelect.options.length] = new Option(city.capitalize(), city);
});