IE 是否需要在知道它的屬性之前將元素插入到 DOM 中？

Question

我希望這不是一個重復的問題，但快速搜索並沒有給我任何結果。
我需要使用如下數據動態創建<select multiple="multiple">元素：

var _options = [
    {
        MaterialCombined: '123 - asd',
        MaterialName: '123'
    },{
        MaterialCombined: '143123 - asdqw',
        MaterialName: '143123'
    }
];

現在，以下代碼在瀏覽器中完美運行！= IE

var select = new Element('select ', {'multiple ': 'multiple ','size ': ((_options.length > 5) ? 5 : _options.length),'class ': 'AF_ddl ','style ': 'width: 250px'});

for (var i = 0; i < _options.length; ++i) {
    var option = new Element('option ').update(_options[i].MaterialCombined);
    option.value = _options[i].MaterialName;
    select.options.add(option);
}

但在 IE 中，嘗試在select.options屬性上調用add()時會引發異常。 這是為什么？ IE 是否需要將select插入到 DOM 中才能對其進行操作？
請注意，我確實讓它像這樣工作

var tmp = '';
for(var i = 0; i < _options.length; ++i){
    tmp += '<option value="'+_options[i].MaterialName+'">'+_options[i].MaterialCombined+'</option>';
}                                       
var select = new Element('select', {'multiple' : 'multiple', 'size' : ((_options.length > 5) ? 5 : _options.length) , 'class' : 'AF_ddl' , 'style' : 'width:250px'}).update(tmp);

但我真的不喜歡這種處理元素的方式：:(

Answer 1

異常給出的信息是什么？ 您可以嘗試通過交換行將<option>元素添加到集合中的替代方法

select.options.add(option);

和

select.options[i] = option;

---

編輯：或者您可以使用appendChild() ：

select.appendChild(option);

工作演示： http://jsfiddle.net/Mc8s5/

請注意，兼容模式下的 IE9 與元素本身存在問題，因為代碼中標簽名稱和屬性名稱后面有空格。 我在上面的工作示例中刪除了這些。