Javascript problems with IE, and Prototype 1.6.0.3

Question

The code below works perfectly fine with Firefox, however, I am having problems with IE 8... and 7... instead of populating the select's with the options returned from my php script (like it does in FireFox) it is doing nothing in IE.

I have narrowed the problem down to $('city').innerHTML -- works in Firefox not IE.

Any ideas?

This is in my header:

<script type='text/javascript' src='js/prototype-1.6.0.3.js'></script>
<script type='text/javascript' src='js/scriptaculous.js'></script>

The HTML code (resides in the body)

--snip--
<select id="city">
</select>
--snip--

The JavaScript this gets triggered from the Prov/State onChange (which works on IE and FF)

--snip--
$('city').innerHTML = "<option value='test'> This is a test";
--snip--

Answer 1

Looks like this is a known bug: that still hasn't been resolved.

You can't reliably set the innerHTML of a select element in ie.

Workarounds include setting the innerHTML of the entire select element (by setting the parent's innerHTML), or creating and appending individual option elements.

Answer 2

How about using update() instead?

$('city').update("<option value='test'>This is a test</option>");