Question

I’ve got an ajax call that takes in a zipcode, searches a database for city/county/state options for that zipcode, and then populates three select boxes appropriately. This works all well and fine in Chrome, Firefox, and IE9. But in IE8 the display behaves oddly. The first population of the select boxes works without issue. But if you change the zipcode, the second population doesn’t display correctly. The DOM content of the selectbox is fine, but the contents of the drop down is what the contents were before repopulation. But if you select one of the options the selected value is what the selected option is supposed to be. In the second picture, ‘Beverly Hills’ is supposed to display ‘Washington’, but on selection the select box actually displays ‘Washington’. You can use up/down to navigate the selectbox, but the dropdown display is broken.

The code behind the process is basically

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

I’ve tried reproducing the issue in a jsFiddle, but I’ve been unable to unfortunately, and I can’t point you to the exact page that the issue is occuring on, so I’ve included pictures of what’s happening. Any ideas? Is there a force refresh or something I can use? I can provide additional information as needed.

Answer 1

I ended up having to revert to adding the options to the selectbox via non-jQuery. That fixed the issues I was getting, for whatever reason.

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