SELECT框：在IE项上添加到OptGroup而不是root。 FF好的

Question

我对Select Box和OptGroup的行为有点奇怪： 我使用OptGroup并尝试在最后添加一个我希望超出OptGroup的项目。 FF按预期执行，但IE将其添加到OptGroup

使用以下代码：fiddle（注意：JQuery仅用于.ready方法，我不能在我的项目中使用它）

<select id="selectbox">
    <optgroup label="optGroup1">
        <option>aaaa</option>
    </optgroup>
</select>

---

$(document).ready(function() {
    var select = document.getElementById("selectbox");
    option = document.createElement( 'option' );
    option.value = option.text = "test";
    select.add( option );
});

---

IE和FF中的结果不同

IE： FF：

注意：我正在使用Javascript添加项目，因为我目前正在使用GWT。所以这就是GWT将项目添加到select的方式。

Answer 1

在IE和Chrome中

This works，因此它应该在FF中运行：

$(document).ready(function() {
var select = document.getElementById("selectbox");
option = document.createElement( 'option' );
option.value = option.text = "test";
select.appendChild( option );
});

Answer 2

您实际上可以在选项组之后插入选项：

HTML （为选项组添加了ID）

<select id="selectbox">
    <optgroup label="optGroup1" id="optGroup1">
        <option>aaaa</option>
    </optgroup>
</select>

<强>的JavaScript

var optgroup1 = document.getElementById("optGroup1");
option = document.createElement( 'option' );
option.value = option.text = "test";

//insterting "after"
optgroup1.parentNode.insertBefore(option, optgroup1.nextSibling)

演示：http://jsfiddle.net/tZ8sz/1/