<select> innerHTML problem

Hi everyone,

Ok, what I'm trying to do is use the innetHTML property of a <secelct> box to change it's contents. What I do is generate a string with a list of <option> tags and then use

document.getElementById("mybox").innerHTML = s;

to fill the select box.

Now it doesn't work, particularily, the contents of the select box are displayed in a single string. When it should have been 3 items like
item1
item2
item3

it's really one item showing in the drop down menu:
item1item2item3

Now I looked at the contents of the string before putting it into the innerHTML and at the innerHTML after assigning the string to it. It looks pretty wierd. The string at first seems right
<option value=1>item1</option><option value=2>item2</option>

but after inserting the innerHTML contains something like

item1</option><option value=2>item2</option>

lacking the first opening option tag.

Does anyone have an idea as to what's the problem here and how it can be fixed?

First thing's first... innerHTML wasn't designed to do what you're trying to do. innerHTML should really only be used as a last resort when DOM manipulation gets too cumbersome. Select elements have an add() and remove() method available to manipulate elements and you can always edit elements directly with selectElement.options[index].text and selectElement.options[index].value. I use select boxes extensively in a lot of my projects and this has always been the cleanest way to go.

I agree, innerHTML should not be used for this.

Take a look at this tutorial.

Gee guys, i've been using innerHTML for almost everything It looked very straightforwrd to me

Anyway, thanks for the help

you might be able to replace the entire select box with innerHTML for whatever the select's parent element is...just a guess.

Using innerHTML to create or modify form controls will not work well cross-browser.

I hope you looked at the link in my previous reply.