向选择中添加选项在Internet Explorer

Question

问题

如果你通过JavaScript为select添加一个选项，那么一切似乎都很好。

但是如果你有一个通过数据库填写的表格，例如并且该选项中的一个选项是预选的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。 Lo，额外＆lt; 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>