SiteCrafting Blah Blah Blog
Dec. 13, 2006 at 4:12pm
The <select> Tag and innerHTML
While I was working on a recent project, I ran into a weird bug with IE 6. I was using some AJAX to dynamically fill a <select> tag with options depending on what element was selected from the tag's parent. It worked fine, and quite seamlessly in Firefox, but broke for inexplicable reasons in IE.I was using a php script to get all the selectable options, and then passing that back to the javascript handler to be inserted into the document. The problem was that, apparently, you can't use the .innerHTML property to set content on a select tag.
This makes no sense, for two reasons: 1) Microsoft created the innerHTML property, and it doesn't work in their software and 2) All you really need to do is find the node, and replace it's children with some abritrary string. It's not terribly complicated. Every other (modern) browser seems to handle it perfectly fine.
After Mark had pointed out that fact, I just used the php script to return an entire select element with the options already populated, but that broke the event listener I had placed on the tag to change the select options for that select's children. But that was quick and easy to fix: just reload the event listener on the completion of the AJAX call.
I've gotten to the point that most browser inconsistencies don't really faze me. I know what to expect and how to work around it, but this one really threw me for a loop. So, take note developers, <select> + innerHTML = broken. But you should really be using the DOM anyways.
Posted in Browser Bugs, Javascript, PHP by Dave Poole
Comments (7)
I ran into your blog by searching for "ajax changing options of a select tag" when the same problem occurs during my development. It really helps a lot and saves some time hunting the defect down.
Thanks a lot and best regards,
1 | Left by Jan Sein Cousin | Jan. 9, 2007 at 6:54am
Dave says:
Jan -
Thanks for the feedback! I had a similar situation, but before Mark figured out what the problem was, I'd already spent a couple hours on trying to find a solution. I figure that getting the word out as much as possible will help let people know ahead of time about problems they could run into.
2 | Jan. 10, 2007 at 8:44am
Thanks for this! I'm currently working on a new project and am still the code the part using select controls, but looks like you've now saved me a good few hours problem solving. Thanks!
3 | Left by Adam Dempsey | Mar. 16, 2007 at 10:32am
Kevin says:
Ran into something similar with tables in IE. You can replace the innards of a <table> tag using innerHTML. My solution? Surround the table in an ID'd <div> and user innerHTML to replace the entire table instead.
4 | Mar. 16, 2007 at 11:15am
I had the same problem you did and the solution was to replace the entire select item. Now I ran into the event listener problem and I don't quite understand how to reload the event listener of the page after the completion of the AJAX call. Thanks for you time anyway.
5 | Left by Fabricio Brito | Jan. 18, 2008 at 4:57am
Dave says:
Fabrico - You have to reload the listener, because the element that it was listening to was replaced.
6 | Jan. 18, 2008 at 11:23am
Hi Dave:
I write you because i was have the same issue...As you say the innerHTML with the select tag is broken for some reason...(as far a i know is still broken in IE7). The only solution i found to fill the select tag with options is with:
var optionlist=document.createElement("option");
optionlist.value="http://www.yahoo.com";
optionlist.innerHTML="This is a test page";
document.getElementById("select_tag_id").appendChild(optionlist);
i used with in a similar situation as you describe and is the only solution i found to that issue
Best regards
Phoenixzero
7 | Left by phoenixzero | Jun. 4, 2008 at 8:33am