InnerHTML IE 8 无法正常工作？重置表单

Question

是的，这在 FF 和 Chrome 中有效，但由于某种原因在 IE 8 中不起作用。我使用单选按钮来清除表单的一部分..该部分是一个选择框，但我不想离开区域为空 - 相反，我想将其重置为页面加载时的状态。目前 IE8 只给我留下一个空的小选择框。

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>";

我也尝试在javascript中使用location_id而不是city_select，但无济于事..innerText和innerContent也不起作用..虽然inner.HTML在IE8中适用于早期功能，但这并不是试图innerHTML成一种形式。有谁知道为什么这在 Chrome 和 FF 中有效，但在 IE8 中无效？有解决办法吗？任何帮助表示感谢！

Answer 1

试试这个：

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

然后创建一个新选项并将其推送到选择的选项数组中。这些选项有点棘手，其行为与其他标记不同。

编辑以显示如何创建选项：

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;

Answer 2

应该有 4 种方法将新选项分配给选择元素。有些在某些场景下工作，有些在其他场景下工作。看这里 - 如何将选项添加到< SELECT>, 在 IE Windows Mobile 5

对我来说，Robusto 的解决方案由于三个原因而不起作用：

1) 第一行中的 sel 变量被分配了 document.getElementById( 'city_select').options.length = 0; 而不是简单地保留 select 元素（以便稍后在第 4 行和第 5 行中使用），然后删除下一行中的选项，如下所示：

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

2) 第 4 行 < code>sel.options.push(opt)（或稍后建议的sel.options[0] = opt）抛出一个对象不支持此属性或方法 错误。而是使用这个：

sel.appendChild(opt);

3）除了为选项分配值之外，您还必须分配要显示的文本。你这样做：

opt.innerText = "Select Your City - displayed";

因此，总结整件事：

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