javascript - 在 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 在这里会有不同的 react 吗？

提前致谢!

Answer 1

困难是通过插入“你的神话般的新选择”而引入的。 ;)

如果将其插入为第 5 个条目(oSelect[4]) IE 会保持 html 的选定值“Angola,AGO” 处于选中状态。然而在此条目之前添加一些内容会使事情变得困惑。问题是它会选择条目[3]而不检查“Angola,AGO”是否仍然保持该位置。

编辑/解决方法

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

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>