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'。

有人知道可能导致这种情况的原因吗？

更新：
好的，我找到了一个解决方案，它涉及用手动生成选项节点替换'insert'，如下所示：

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

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

我猜这个问题与原型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;

Answer 2

好的，我找到了一个解决方案，它涉及用手动生成选项节点替换'insert'，有点像下面这样：

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

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

我猜这个问题与原型insert（）如何工作有关，尽管我很高兴问题得到解决。

以编程方式选择IE中的选项

2 个答案: