innerHTML在IE8下出现奇怪的事情：option前部分不见了，请大家帮忙

Question

类型：
<select id="type" name="type">
<option value="1_1">1_1</option>
<option value="1_2">1_2</option>
</select>
分类：
<select id="category" name="category" onchange="if(this.value != '') setChange(this.options[this.selectedIndex].value);">
<option value="0">评论</option>
<option value="1">投票</option>
<option value="2">提问</option>
</select>
<script type="text/javascript">
function setChange(str)
{
content = null; var city = document.getElementById('type');
//alert(city.innerHTML);
if(str == '0'){
alert('修改前值：'+ city.innerHTML);
content = "<option value='1_1'>1_1</option><option value='1_2'>1_2</option>";
city.innerHTML = content;
alert('修改后值：' + city.innerHTML);
}else { content = "<option value='0'>未知</option>";
alert('修改前值：'+ city.innerHTML);
city.innerHTML = content;
alert('修改后值：' + city.innerHTML);
}

}
</script>

Answer 1

在FF下正常显示菜单的变化，但在IE8下，总是显示缺少<option value=''>这前部分，大家可以拷贝到页面里试试，若有解决办法，立即给分结贴，非常感谢！

Answer 2

通常的做法是
city.length=0;
city.options[city.options.length] = new Option("未知","0")
city.options[city.options.length] = new Option("未知2","02")
等方法

Answer 3

请参见
http://blog.csdn.net/grubbyfan/archive/2009/01/09/3743344.aspx
的总结

Answer 4

非常感谢net_lover！问题解决的办法就是采用new Option（1,1）的方法，可以兼容FF，IE,TT等多个浏览器。
结贴，给分。