为select动态添加option问题

题记：今天为个项目做两个多选列表框互相移动案例，要求支持包括FF,IE,Safari(苹果)在内的浏览器使用。

问题：

现象一，用方法objSelect.appendChild(objOpiton)给select添加option时，添加有出现列表项，但是显示空白，IE下的现象。

现象二，用objSelect.add(objOpiton)添加option,FF下不支持。

关键代码（由于是日文项目，注释为日文可忽略不看）：

function moveSelected(oSourceSel,oTargetSel)

{

//valueとtextを格納するキャッシュ配列を作成する

var arrSelValue = new Array();

var arrSelText = new Array();

//当該配列は選択されたoptionsを格納する

var arrValueTextRelation = new Array();

var index = 0;//補助的にキャッシュ配列を作成する

//ソースドロップダウンリストでの全てのデータをキャッシュに格納し、valueと選択されたoptionの対応関係を立てる

for(var i=0; i<oSourceSel.options.length; i++)

{

if(oSourceSel.options[i].selected)

{

//格納

arrSelValue[index] = oSourceSel.options[i].value;

arrSelText[index] = oSourceSel.options[i].text;

// valueと選択されたoptionの対応関係を立てる

arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];

index ++;

}

}

//キャッシュでのデータをターゲットドロップダウンリストに追加して、ソースドロップダウンリストでの該当データを削除する

for(var i=0; i<arrSelText.length; i++)

{

//追加

var oOption = document.createElement("option");

oTargetSel.appendChild(oOption)

oOption.text = arrSelText[i];

oOption.value = arrSelValue[i];

//ソースドロップダウンリストでの該当データを削除する

oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);

}

}

观察以上代码55-59行

现象一代码为：
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.appendChild(oOption);

现象二出现的代码为：
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);

结论：

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

而FF并没有这个约束。

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

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