Setting innerHTML of select : IE screws me again

vijayjoshi.org - php | javascript | ajax | and all things web

Setting innerHTML of select : IE screws me again

October 5th, 2008 | Posted by Vijay Joshi | 10 Comments

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Update : Doesn’t work in IE8 too.

I tell you again. IE Sucks.

Reason this time: Last time it was appending rows to an existing table. Now it wont let you set innerhtml of a select box through javascript too.

Here is the tale:

Yesterday I was working on an AJAX application where i needed to add options dynamically to some select boxes.
I had a select box in my html page and a json containing values. Thats good.
Now i iterated over the json, created a string with all options and values and simply set the innerHTML of the select box to the generated string. As simple as that.

var citiesSelect = document.getElementById('cities');// this is the select box
var str="";
for(var i=0; i < allCities.length; i++)// allcities is the array
{
     str+='


';
}
     citiesSelect.innerHTML = str;
}

And I was done. I opened firefox and checked it. It worked.
It was IE’s turn now. It wont fill the selects at any cost. I was surprised. Neither IE6 nor IE7. Will update when I check with IE8.

Here is an example. You can check it across browsers.

Doing some google told me that THIS IS A BUG IN IE. It removes the first <option> part from the string to be set as innerHTML.

Direct from microsoft support – BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

This led me to use DOM functions instead. I created each option. Then set its value, css. Another text node for display like that. Not difficult but the point is, all this could have been achieved in half the number of lines and time DOM functions took and in a simpler way. Moreover a bug related to a major feature like innerHTML in the most used browser is still lying there from the days of IE6 (or even before that…).

There are a couple of other ways as a workaround for this bug which I will discuss in coming posts.

Leaving with Douglas Crockford’s words:

“If a web browser is defective, causing errors in the display or performance of the page, should the page developer struggle to hide the browser’s defects, or should the defects be revealed in hope of creating market pressure to force the browser maker to make good? By which approach is humanity better served?”

Posted in : Javascript
Tags: Javascript

9 Comments to “Setting innerHTML of select : IE screws me again”

Add Comments (+)

Jyotsna says:

October 6, 2008 at 9:55 am

Humanity better served !!! Thats a difficult one to answer ….

Reply
Bhuwanesh says:

October 6, 2008 at 11:14 am

What i feel first one is the better solution for we people because as an old saying..its better to realize our mistake(to mess with such browsers ) rather than to pin point others..

after all we have crome now..:)

Reply
Samanul says:

October 8, 2008 at 11:06 am

innerHTML perplexed us in IE most of the times we use it in comparison to other browsers like mozilla ,netscape. but browser compatibility is itself a problem and there are different different approach of the browser for their own purpose.So instead of blaming the browsers just to find a solution for our own— and far as there is a solution for IE however different and lengthy it would be it is ok.

Reply
Omprakash Deshmane says:

January 13, 2009 at 10:34 pm

I know when you say it abt. IE8 too –

On the condition of anonymity I have an excellent proposal for web developers

1. Follow W3C, leave non complying browsers in trash
2. Specifically detect IE and if IE is detected redirect to any of the numerous posts and firefox download link

Reply
Vijay says:

January 14, 2009 at 11:59 am

@Omprakash
Agree with you on both points. Just leave non compliant browsers so that they may raise their standards. Personally I liked the second point more but as we know it is just not possible.

Reply
Enrique de Haro Cortes says:

March 3, 2010 at 5:04 am

OK, that is a problem and Microsoft has no fixeed it.

You can use this modification of your code it works in all browsers including IE.

var citiesSelect = document.getElementById(‘cities’);// this is the select box
var str=”";
for(var i=0; i < allCities.length; i++)// allcities is the array
{
str+=”+allCities[i][1]+”;
}

var iexplorer = navigator.appName.indexOf(“Microsoft”) != -1; //Verifiy explorer

if (iexplorer) {
str2 = “x” + str; // Super very very important
xparent = citiesSelect.parentElement;
citiesSelect.innerHTML = “”;
citiesSelect.innerHTML = str2;
xparent.innerHTML = citiesSelect.outerHTML;
}

else {
citiesSelect.innerHTML = str; // Normally
}

}

Reply
eric says:

July 8, 2010 at 6:21 pm

Just put the select into a span and then set the innerHTML with select and its options.

Reply
Bindu says:

September 8, 2010 at 5:21 pm

Hai Vijay,
i need ur help,
i have three drop down list. second drop down values are based on first , and thrid coming from second.and so on.
after submitting values of second and third is not getting.
i used ajax for selecting the values in drop down..
how can i get values after post ?

Reply
Jins says:

November 1, 2010 at 2:29 pm

Hi Vijay,

You have wrote that “There are a couple of other ways as a workaround for this bug which I will discuss in coming posts” but so far I have not seen any.

Can you please post them so that I can fix my issue which is the same problem?

Thanks in advance,

Reply