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

时间:2011-01-20 16:58:33

标签: javascript html internet-explorer firefox

我编写了一个简单的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,当我点击“添加”按钮时,没有任何内容添加到下拉列表中,有人可以帮忙吗?提前谢谢。

4 个答案:

答案 0 :(得分:4)

您应该指定节点名称,而不是指定为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 )

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:1)

请改用:

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