向選擇添加選項在 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。 瞧，它總是需要額外的 <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>