Problems creating a SELECT box using the DOM in Internet Explorer 6

Internet Explorer 6 has lots of “issues” when it comes to displaying SELECT boxes - displaying over the top of any other elements, on a page, not letting its OPTIONS be wider than the surrounding SELECT box, the list goes on. Last week it was my turn to come across a new issue that I could not find reference to anywhere.

I was at work, writing a bit of JavaScript that created a SELECT box using the DOM. Specifically, I wanted a list box that showed a number of OPTIONs at once (i.e. not a dropdown box), which I set up by giving a value greater than one to the SELECT’s size. Simple. Testing the code in Firefox showed it doing exactly what I wanted - it created a list box. When I came to test in Internet Explorer however, the list box was nowhere to be seen - instead, I got the dropdown I was specifically trying to avoid!

Naturally, this caused some consternation. I had to have a SELECT box that showed a certain number of rows at once - one that showed a dropdown instead would just not do. The first thing I did, before yelling foul at Internet Explorer was to test my code in a few other browsers. None of them showed a problem. I ran my code through JSLint, and it was pretty happy. With this done, I created a test case. At this stage I wasn’t exactly sure what was causing the problem, so I coded up a quick page that displayed three SELECT boxes next to each other; one which was completely defined in HTML, one created using the DOM and the “createElement” method, and one created using innerHTML.

The result of this test showed that while Internet Explorer 6 would show a SELECT box with multiple rows with the HTML and innerHTML methods, the DOM only SELECT box would be shown as a dropdown. Interestingly, the dropdown still occupied the amount of space that the multiple rowed element should have taken. Still, it would seem that it’s the DOM methods which Internet Explorer has issues with, rather than the fact that the element was programatically created.

On a hunch, I decided to “touch” the innerHTML of the element sourounding the SELECT box (outerEl.innerHTML += '';). Amazingly, this caused Internet Explorer 6 to display the SELECT box as expected! My problems were over, and I could get back to work.

Or could I? As it happens, this innerHTML-ising of the SELECT box caused other problems. Foremost of these was that the events which I was adding to the SELECT box using a variant of Scott Andrew’s addEvent method were no longer working! This realisation resulted in my head thunking down onto the desk in exasperation. To come so close to a working solution only to have it unravel in front of me was exasperating, to put it mildly.

Help was at hand though. During my googling to see if anyone else had come across this issue before, I had run into the Channel 9 Wiki’s Internet Explorer Programming Bugs page. Hidden somewhere in the middle of this page was a section about SELECT box bugs. Unfortunately, none of them echoed the exact problem I was having. Still, I persevered, reading the individual bug pages which were linked to. Eventually I came across something that I hadn’t seen before - you can create SELECT box OPTIONs using an “Option” method.

Frankly, I didn’t think that substituting this for the createElement method that was creating the OPTIONs would make any difference at all. After all, the problem lay with the SELECT box itself, surely? Still, I plugged the new code into another test case, and it worked! All the browsers I tested in displayed the SELECT box coreectly, they all fired events as expected, and I was a very happy boy.

So, the moral of the story is that if you need to create SELECT boxes in Internet Explorer 6 using JavaScript, and you don’t want a dropdown, then use the Option() method to create the OPTIONs. Oh, and all this has been fixed in the IE7 Beta 2 with the complete rewrite of SELECT boxes.

If you’d like to run through my full test case, you can. Let me know if there’s anything obvious that I missed. I’ve only really being “doing” JavaScript for a couple of months, so maybe this whole issue really isn’t an issue at all? Whatever the wider community has to say, I’d love to hear it.

If you enjoyed reading this and would like other people to read it as well, please add it to del.icio.us, digg or furl.

If you really enjoyed what you just read, why not buy yourself something from Amazon? You get something nice for yourself, and I get a little bit of commission to pay for servers and the like. Everyone's a winner!

comments (5) | write a comment | permalink | View blog reactions

Comments

  1. by Allen on August 8, 2006 03:28 PM

    Having the same problem and stumbled on this page. Thanks for sharing this info!

  2. by Jorge Luna on August 28, 2006 05:01 PM

    I spent HOURS fighting against this nonsense bug in IE. I keep staring in awe at the incredible number of flaws IE has.. I just hate it!

    Anyway, thanks for the post! Helped confirm my fears.

    BTW do you know if there is a bug report to M$ for this to be fixed?

  3. by Alex on December 19, 2006 06:10 PM

    var sel; try { // For IE6 sel = document.createElement(‘’); } catch (e) { // For other browsers sel = document.createElement(‘select’); sel.setAttribute(‘multiple’, ‘multiple’); }

    // It is really works! ;)

  4. by Alex on December 19, 2006 06:11 PM

    var sel; try { // For IE6 sel = document.createElement(‘’); } catch (e) { // For other browsers sel = document.createElement(‘select’); sel.setAttribute(‘multiple’, ‘multiple’); }

    // It is really works! ;)

  5. by Shannon on April 30, 2007 10:41 PM

    I tried this and it worked in IE - this is from your example.

            function getSelectBoxDOM() {
                selectBox = createElement('select');
                selectBox.size = 3;
                selectBox.length=10;
                selectBox.length=0;
    
                for (x=0; x < 10; x++) {
                    optionItem = createElement('option');
                    optionItem.appendChild(document.createTextNode(x));
    
                    selectBox.appendChild(optionItem);
                }
    
                return selectBox;
            }
    

    I set the length to 10 then back to 0.

other relevant pages

about wwm

workingwith.me.uk is a resource for web developers created by Neil Crosby, a web developer who lives and works in London, England. More about the site.

Neil Crosby now blogs at The Code Train and also runs NeilCrosby.com, The Ten Word Review and Everything is Rubbish.