IE6/HTML Select – ‘Could not set the selected property. Unspecified error.’

December 15, 2009

Hello,
Recently I was developing a control where the HTML select boxes are populated with option elements on the fly within jQuery’s $(document).ready() function.
It worked perfectly fine in all the browsers ( Firefox , Google Chrome and IE7) except IE 6.

I was fortunate enough to find this FINE article that enlightened me about the error and fix for it.
jquery-ie6-and-could-not-set-selected.html

Thanks a ton to the Author of above blog.

Here are the details of problem faced and resolution I used based on the above article/blog.

Upon checking the JavaScript error for IE 6, found that it threw the following error
Error: Could not set the selected property. Unspecified error.

This was not caused due to Java Script programming error while initializing the SELECT boxes with OPTION elements.

This was caused by the line that actually sets the selected item in the HTML SELECT using

//Consider a HTML SELECT control with id=”source” in HTML page.
$("#source").val($("option[index=0]","#source").val());

To resolve this error put the code that selects the value in a try/catch block. For IE6 once this line throws the exception again try to set the selected value using JavaScript function “setTimeout()” with a timeout period of 1 millisecond. This much time-delay is sufficient for IE6 to see the refreshed DOM tree and select the corresponding item.

//Consider a HTML SELECT control with id=”source” in HTML page.
try {
	$("#source").val($("option[index=0]","#source").val());
} catch(ex) {
	setTimeout(function() {
		$("#source").val($("option[index=0]","#source").val());},1);
}
Advertisements