I've recently run into a rather nasty bug, wherein the code was loading a <select>
dynamically via JavaScript. This dynamically loaded <select>
had a pre-selected value. In IE6, we already had code to fix the selected <option>
, because sometimes the <select>
's selectedIndex
value would be out of sync with the selected <option>
's index
attribute, as below:
field.selectedIndex = element.index;
However, this code wasn't working. Even though the field's selectedIndex
was being set correctly, the wrong index would end up being selected. However, if I stuck an alert()
statement in at the right time, the correct option would be selected. Thinking this might be some sort of timing issue, I tried something random that I'd seen in code before:
var wrapFn = (function() {
var myField = field;
var myElement = element;
return function() {
myField.selectedIndex = myElement.index;
}
})();
setTimeout(wrapFn, 0);
And this worked!
I've got a solution for my problem, but I'm uneasy that I don't know exactly why this fixes my problem. Does anyone have an official explanation? What browser issue am I avoiding by calling my function "later" using setTimeout()
?