InnerHTML IE 8 doesn't work properly? Resetting form.

Question

Yeah this works in FF and Chrome, but for some reason wont work in IE 8. I'm using a radio button to clear a section of a form.. that section is a select box, but I don't want to leave the area empty - instead I want to reset it to what it was when the page loaded. At the moment IE8 is just leaving me with an empty small select box.

Html:

<select id="city_select" disabled="true" name="location_id" onchange="show_search_button();"><option selected>Select your city</option> </select>

Javascript:

document.getElementById('city_select').innerHTML = "<option selected>Select your city</option>";

I've also tried using location_id instead of city_select in the javascript but to no avail.. innerText and innerContent dont work either.. though the inner.HTML works in IE8 for an earlier function, but that isnt trying to innerHTML into a form. Does anybody know why this works in Chrome and FF but not IE8? and is there a solution to this? Any help appreciated thanks!

Answer 1

Try this:

document.getElementById('city_select').options.length = 0;

Then create a new option and push it onto the options array of the select. The options are a tricky bit that don't behave like other markup.

Edited to show how to create an option:

var sel = document.getElementById('city_select').options.length = 0;
var opt = document.createElement('option');
opt.value = "Select Your City";
sel.options.push(opt);
sel.selectedIndex = 0;