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.
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.
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,
Left by Jan Sein Cousin | Jan. 9, 2007 at 6:54am
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.
Left by Dave at SC | 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!
Left by Adam Dempsey | Mar. 16, 2007 at 10:32am
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.
Left by Kevin at SC | 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.
Left by Fabricio Brito | Jan. 18, 2008 at 4:57am
Fabrico - You have to reload the listener, because the element that it was listening to was replaced.
Left by Dave at SC | 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
Left by phoenixzero | Jun. 4, 2008 at 8:33am
Dave, I've just found the same problem and I think the same as you. We should be using DOM for this matter, but anyways it's still an IE bug.
In my case I'm using XMLHttpRequest to load plain HTML with some options that depend of some parameters, and substituting the inner select HTML for the HTML just loaded. As easy as that.
However, in order to make the same using DOM I should transform my script to output XML, load the XML, parse it, etc. Quite far more complex and time wasting.
Then I had the same idea: to substitute the whole select, and I thought in the same possible problem: the event I had attached before to it. Nevertheless, after reading your comment I decided upon your solution. Thanks!
Left by Julio Loayza | Oct. 28, 2008 at 11:56am
Thanks for the solution, very helpful, but how do you reload the event listener after replacing the select item? Could you provide simple sample code?
thanks
Left by mike | Mar. 21, 2009 at 9:34pm
Leave a Comment