DOM 元素操作select

select动态加option的问题。。

var selectId = document.getElementById("unSelectedServer");//unSelectedServer这个为select选择器

selectId.add(new Option("111","111"));这个在IE下是可用的，但在FF下不行

selectId.options.add(new Option("111", "111"));这个在IE和FF下均可用，new Option的时候，O要大写，不然会报错

for (var i = 1; i <= 5; i++) {

   var oOption = document.createElement("option");
    oOption.appendChild(document.createTextNode("192.168.2" + i));//这个为select的text属性值
    //oOption.setAttribute("Text", "192.168.2"+i);//text属性值用这种写法无效,为什么呢
    oOption.setAttribute("value", i);//value属性值可用这样写
    selectId.appendChild(oOption);
}

动态加载option

写法一，

var oOption = document.createElement("option");
oOption.text =”dddd”;

oOption.value=”dddddddd”;

selectId.appendChild(oOption);

这种写法在FF有效，在IE下只能显示空白

由于IE和FF对DOM的操作有所区别，故而导致IE下显示为空白列表，因为在IE下必须先得到节点后方能为该节点添加子节点或者属性值。

写法二,

var oOption = document.createElement("option");
oOption.text =”dddd”;

oOption.value=”dddddddd”;

selectId.add(oOption);

现象二，理由很简单，FF就是不支持add()的方式添加子节点。而IE为add做过特殊的处理，故而可以得到意向的结果。

补充，以上三种代码在safari下均可以正常运行，不错的浏览器，就像他的外表一样有魅力。