使用js将动态内容添加到选择选项列表

Question

我在html页面上有两个下拉select输入类型。

第一选择下拉菜单的内容如图所示。 第二选择最初是空的。

<select id="box1" name="box1">
    <option selected="selected" value="">--Select-One--</option>
    <option value="Apple"> Apple </option>
    <option value="Orange"> Orange </option>
</select>

我添加了一个js函数，称为第一个select框的onchange并更新了第二个select框（即box2）

var select1 = document.getElementById("box1");
select1.onchange = function() {
    var select2 = document.getElementById("box");
    while (select2.firstChild) {
        select2.removeChild(select2.firstChild);
    }
    for ( var i = 1; i < select1.options.length; i++) {
        if (select1.selectedIndex == i)
            continue;
        var o = document.createElement("option");
        o.value = select1.options[i].value;
        // o.selected = "selected";
        o.text = select1.options[i].text;
        select2.appendChild(o);
        alert("Here " + i);
    }
}

这在chrome和firefox中效果很好，但在IE中效果不佳。 我想可能是导致IE中问题的appendChild 。

请任何提示来解决此问题可能适用于不同版本的IE？

注意：

1. 在IE 9上测试。
2. 已经检查了关于同一错误的其他问题，但大多数问题都在表格行中。

Answer 1

如果必须使用跨浏览器功能，我建议您使用jQuery之类的Javascript库，在jQuery中您可以执行以下操作：

jQuery("#selectId").append('<option value="' + text + '">' + text + '</option>');