Dropdown append behaves erratic in IE8 :: Jquery Bug of DOM Manipulation (for IE8)?
The jQuery preferred code below fails in IE8 but works in all other browsers. When I say fail, what is happening is it seems to be populating the dropdown but there so many blank empty rows.
for (var i in objProspectiveBrides) {
var optElement = new Option(objProspectiveBrides[i].BrideName, objProspectiveBrides[i].BrideId);
if (objProspectiveBrides[i].IsPremiumMember) {
brideObject = objProspectiveBrides[i];
$(optElement).css("selected", "selected");
}
$("#<%=drpMatchingBrides.ClientID %>").append(optElement);
}
Hence I have to make the following workaround for the same:
//IE 8 does not understand the up-level mode to fill the dropdowns. Using classic DOM instead (LD)
var intSelectedIndex = -1;
for (var intElement = 0; intElement < objProspectiveBrides.length; intElement++) {
var dropDownOption = new Option(objProspectiveBrides[intElement].BrideName, objProspectiveBrides[intElement].BrideId)
document.getElementById("<%=drpMatchingBrides.ClientID %>").add(dropDownOption);
if (objProspectiveBrides[intElement].IsPremiumMember) {
intSelectedIndex = intElement;
}
}
document.getElementById("<%=drpMatchingBrides.ClientID %>").selectedIndex = intSelectedIndex;