Click Here to Back

IE, hiding Option Elements with CSS, and Dealing with innerHTML

In Teknologi Komunikasi Info. on April 19, 2007 at 3:55 pm

Oleh Yudhi
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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: