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中，它在尝试调用add()属性上的select.options时会抛出异常。这是为什么？在操作它之前，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/

请注意，compat模式下的IE9在元素本身出现问题时，因为代码中的标记名称和属性名称后面有空格。我在上面的工作示例中删除了这些。

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

1 个答案: