题记:今天为个项目做两个多选列表框互相移动案例,要求支持包括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下均可以正常运行,不错的浏览器,就像他的外表一样有魅力。
为select动态添加option问题
最新推荐文章于 2023-11-30 20:21:41 发布