使用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>

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

select

这在chrome和firefox中运行得很好，但在IE中却没有。我想可能是导致问题的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); } } 。

请为IE的不同版本解决这个问题吗？

注意：

1. 在IE 9上测试。
2. 已检查过有关同一错误的其他问题，但其中大部分都是w.r.t到表格行。

Answer 1

如果必须使用跨浏览器功能，我建议你使用像jQuery这样的Javascript库，在jQuery中你可以这样做：

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