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 在元素本身存在问题，因为代码中标签名称和属性名称后面有空格。我在上面的工作示例中删除了这些。