Recently I discovered that IE (yes, 6 and 7) will not allow the option element to be hidden. That is, setting the CSS display property to a value of “none” will have no effect on an option element in Internet Explorer. Not to my surprise, most every other browser will allow you to do this. In fact, if you want to change or hide the options of a select form in IE, you have to literally remove the option element or its text node from the DOM. But as you will see, even that method has issues.
In an effort to find a workaround to the “display:none” anomaly, I thought I might be able to take all the HTML found inside the select element and store it in a variable. Then, when I wanted to show the conditional options of the drop-down menu, I could simply inject the appropriate HTML back into the select element by setting its innerHTML property (from the stored variable). In testing this method, it again works great in most modern browsers. IE, of course, is the exception (yes, both 6 and 7). In this case, the reason is that IE will store/change/interrupt the innerHTML string value as it pleases, and not according to how the code was written. In retrieving the innerHTML property, IE will strip all quotes and then change the case of the HTML elements inside the string.
In short, say goodbye to valid XHTML code being injected back into the DOM. That is, if you can get it back into the DOM (IE seems to struggle with this as well). It’s apparent that IE prefers innerHTML to be used for setting a property value and not for getting or manipulating a value.
Please refer to my last post before (or after) this one!
Penulis adalah Yudhi Mahasiswa jurusan TI 2007