SELECT框：将IE项目添加到OptGroup而不是根目录。 FF ok

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和铬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/