javascript - 在 IE 中以编程方式选择选项

Question

我有一个生成选择字段并在生成时选择适当选项的小脚本。它看起来有点像这样:

options.each(function (option) {
    var optionString = "<option id='" + option.id + "' value='" + option.value + "'>" + option.text + "</option>";
    $('selectField').insert(optionString);
    if(option.selected) {
        toBeSelected = option.id;
    }
});
$(toBeSelected).setAttribute('selected','selected');

现在上面的脚本在 Chrome 和 Firefox 中运行良好，但在 IE 中它总是选择列表中的最后一个元素。所以说我正在生成一个选项列表 ['a','b','c','d']，'d' 将始终被选中。

有人知道是什么原因造成的吗？

更新:
好的，我找到了一个解决方案，它涉及用手动生成选项节点替换“插入”，有点像下面这样:

var newOption = document.createElement('option');
newOption.setAttribute('value',option.value);
newOption.innerHTML = option.text;
if(option.selected) {
    newOption.selected = true;
}

$('selectField').appendChild(newOption);

我猜测问题出在原型(prototype) insert() 的工作方式上，尽管我很高兴问题得到解决。

在 8 小时内回答我自己的问题后，我会将其重新格式化为答案。

谢谢大家的参与

Answer 1

var options = new Array();

options.push({id:1,value:'one',text:'text1',selected:false});
options.push({id:2,value:'two',text:'text2',selected:true});
options.push({id:3,value:'three',text:'text3',selected:false});
options.push({id:4,value:'four',text:'text4',selected:false});

var toBeSelected;
options.each(function(option) {
    var optionString = "<option id='" + option.id + "' value='" + option.value + "'>" + option.text + "</option>";
    $('selectField').insert(optionString);
    if (option.selected == true)
    {
        toBeSelected = option.id+""; // +"" because have to be a string
    }
});

$(toBeSelected).selected = true;