向选择添加选项在 Internet Explorer 中不起作用

Question

问题

如果您随后通过 JavaScript 将选项添加到选择中，一切似乎都很好。

但是，如果您有一个通过数据库填写的表格，例如并且该选择中的一个选项被预选 Internet Explorer 失败：它始终是预选的下一个选项。

所有其他浏览器都可以正常工作。

示例

这是一个工作示例：

var oSelect = document.getElementById('myselect');
var oOption = document.createElement('option');
oOption.text = '- - - my fabulous new option - - -';
oSelect.add(oOption, oSelect[3]);

<select id="myselect">
  <option value="Algeria,DZA">Algeria</option>
  <option value="American Samoa,ASM">American Samoa</option>
  <option value="Andorra,AND">Andorra</option>
  <option selected value="Angola,AGO">Angola</option>
  <option value="Anguilla,AIA">Anguilla</option>
  <option value="Antarctica,ATA">Antarctica</option>
</select>

JSFiddle

这里是JSFiddle。

问题

你知道为什么 IE 在这里会有不同的反应吗？

提前致谢！

Answer 1

插入“您的绝妙新选择”会引入困难。 ;)

如果您将其作为第 5 个条目插入 (oSelect[4])，IE 将保持 html 的选定值 "Angola,AGO" 处于选中状态。然而，在这个条目之前添加一些东西会使事情变得混乱。问题是它会选择 entry [3] 而不检查 "Angola,AGO" 是否仍然保持该位置。

编辑/解决方法

通过 JScript 进行选择也适用于 IE。瞧，它总是需要额外的

var oSelect = document.getElementById('myselect');
var oOption = document.createElement('option');
oOption.text = '- - - my fabulous new option - - -';
oSelect.add(oOption, oSelect[3]);

// oSelect.value = "Angola,AGO";  <-- changed because of comments
oSelect.value = oSelect.options[oSelect.selectedIndex].value;

<select id="myselect">
  <option value="Algeria,DZA">Algeria</option>
  <option value="American Samoa,ASM">American Samoa</option>
  <option value="Andorra,AND">Andorra</option>
  <option selected value="Angola,AGO">Angola</option>
  <option value="Anguilla,AIA">Anguilla</option>
  <option value="Antarctica,ATA">Antarctica</option>
</select>