Question

我编写了一个简单的JavaScript来向HTML Select元素添加选项，代码如下所示：

 function addOption() {
    var newOption = document.createElement('<option value="TOYOTA">');


    var elSel = document.getElementById('mySelect');
    try{
    elSel.add(newOption,null);
    } //Standard
    catch(ex)
    {elSel.add(newOption);
    } //IE Only
    newOption.innerText = "Toyota";
}

我发现在线教程显示我们需要做这样的事情来让Firefox / Chrome和IE工作。但是，目前只有IE可以使用，对于FF / Chrome，当我点击“添加”按钮时，没有任何内容添加到下拉列表中，有人可以帮忙吗？提前谢谢。

Answer 1

您应该指定节点名称，而不是指定为createElement afaik的HTML字符串。

var el = document.createElement('option')
  , fc = document.createTextNode('blah')
  , s = document.getElementById('foo');

el.value = 'blah';
el.appendChild( fc );
s.appendChild( el )

Answer 2

如果你要进行大量的UI操作，我建议使用像jQuery这样的第三方库来使这更容易，更兼容跨浏览器。

 $('#mySelect').
      append($("<option value='TOYOTA'>TOYOTA</option>").
      attr("value",'TOYOTA').
      text('TOYOTA'));

Answer 3

我很惊讶甚至可以在IE中使用。

尝试使用以下方法替换函数内的所有内容：

var newOption = document.createElement("option");
newOption.setAttribute("value", "TOYOTA");
newOption.appendChild(document.createTextNode("My toyota"));
var elSel = document.getElementById('mySelect');
elSel.appendChild(newOption)

Answer 4

请改用：

var mySelect = document.getElementById("mySelect");
mySelect.add(new Option("Toyota", "TOYOTA"));

为什么JavaScript不适用于Firefox / Chrome但适用于IE？

4 个答案: