View Full Version : innerHTML to populate <select> no go in IE

07-20-2006, 09:31 PM
I am using getElementbyID and InnerHTML to populate the options in a select tag. I am using SAJAX (PHP and AJAX) and I've heard it's a bad idea. But it's too late to completely change my code. It works perfectly in Firefox but in IE the selectbox aren't populated.

Could someone help me out?

here is the code I believe could cause the problem:

function refreshcat(displayString){
changingID = 'cat' + document.getElementById("change_id").value;
if (document.getElementById)
var replace=document.getElementById(changingID);
if (replace)
if (replace.childNodes[0])
else if (replace.value)
else //if (replace.innerHTML)


and here is the link to the page:


any hints as to why it doesnt work in IE but does in firefox would be greatly appreciated!

thanks in advance


07-20-2006, 11:46 PM
what does that comment stand for?

else //if (replace.innerHTML)

Try remove it.

.....anyway your code looks buzzling for me... why do you need to use as condition
else if (replace.value)
else if (replace.innerHTML)


can't you make your code in a simple crossbrowser DOM way?

07-21-2006, 12:01 AM
It sounds to me like he is being sent the options as a string. Which makes it tuff to use the dom to append them to the select. In which case it takes some fancy string handling to get the needed data and append it to newly created options.

It would be nice if there was a cross browser way to "load" a xml or xhtml string into a dom traversable variable or something. If there is someone please share this with me as it would make life a lot easier for myself as well.

What I do to get around this is put the string into a hidden div in the document using innerHTML and then traverse through it to recreate it.

Like So:

<script type="text/javascript">
function changeOptions()
var str=""+
"<option>New Value 1</option>" +
"<option>New Value 2</option>" +
"<option>New Value 3</option>" +
"<option>New Value 4</option>";

var temp_sel='<select id="temp_sel">';
var temp_end='</select>';
var obj1=document.getElementById('temp');

var obj2=document.getElementById('temp_sel');
var len=obj2.length;

var obj3=document.getElementById('sel1');
for(var i=0;i<len;i++)
var txt=obj2.options[i].text;
var val=obj2.options[i].value;
obj3.options[obj3.length]=new Option(txt,val);
<style type="text/css">
<div id="temp">
<select id="sel1">
<option>Old Value 1</option>
<option>Old Value 2</option>
<option>Old Value 3</option>
<option>Old Value 4</option>
<input type="button" onclick="changeOptions();" value="Test" />


07-21-2006, 07:52 AM
Trying to set the content of a select the wrong way will never work. The options are part of the select and so can't be separately referenced via innerHTML, you reference them using the options array instead.

So instead of trying to use


you would instead use

obj1.options[obj1.options.length] = new Option(strtxt,strval);

to add each option separately after splitting the required content into separate text and values for each option

07-21-2006, 05:58 PM
Isn't that what I did?


I'm playing psychic forum guy. :p The reason for that line is that I am assuming he is recieving a string of option values from the server, instead of an xml document of option values. So in order to properly parse out the text and value options you'd need some means of making the string traversable. Or some fancy string handling to to strip out the values and text from the string. I haven't had much luck loading a string value into the xml parser for either IE or Moz so I just insert the string into a hidden div and traverse it from there. Then clear it out.


07-22-2006, 02:57 PM
I would have not used innerHTML at all. I would have used createElement() and removeChild() methods all over... The moment u mix DOM methods with innerHTML non-standard method, problems will occure for sure...

07-22-2006, 09:01 PM
Well I used felgall's suggestion

obj1.options[obj1.options.length] = new Option(strtxt,strval);

had to change my code a bit, but now it works perfectly.

thanks a bunch for all suggestions

07-24-2006, 06:47 PM
I would have not used innerHTML at all. I would have used createElement() and removeChild() methods all over... The moment u mix DOM methods with innerHTML non-standard method, problems will occure for sure...

I totally agree. I wouldn't do what I suggested if I had any control over the format of the data being sent to me. If I just have a string though, and not xml, how would you use removeChild to get the data you need for the values and text for the option in the example above?


EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum