IE8 select 動態下拉遇到的問題

發生背景:經QC測試程序一直沒問題,到客戶測試居然出現了下拉窗口失效.

檢查發現客戶用的IE ,360 瀏覽器都出現同樣的問題,聽說360是引用IE的核心.

看下IE版本是 8的.....  開發和QC都是11版本的...

通過一陣和度娘互動找到了下面緣由

1.IE8不支持 onchanged 事件.    

解決:使用 onclick 事件代替 

也有說用JQ的 $('#id').change 可是不知道爲何也無效

2.IE8 對select增長option使用 appendChild方法 支持有問題.

網上說要 改 閉合.  也沒個準確的方法.

原來:(IE11沒問題)

var newNode = document.createElement("option");
var newNode.value = '123';
var newNode.text = '張三';
document.getElementById('select_id').appendChild(newNode);

改成:

var newNode.value = '123';
var newNode.text = '張三';

document.getElementById("keyvalue").options.add(new Option(text,value));  

 

刪除  option 

3.IE 和 其餘瀏覽器 也有不一樣

解決:

3.1.先判斷瀏覽器

function BrowserType(){
//debugger;
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器
var isEdge = userAgent.indexOf("Windows NT") > -1&&userAgent.indexOf("Trident")>-1 && !isIE; //判斷是否IE的Edge瀏覽器
var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器
var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判斷Chrome瀏覽器

if (isIE||isEdge) { return "IE";}
if (isFF) { return "FF";}
if (isOpera) { return "Opera";}
if (isSafari) { return "Safari";}
if (isChrome) { return "Chrome";}
//if (isEdge) { return "Edge";};
}

3.2.刪除

//根據SELECT的id 移除選中標籤的內容
function removeData(id) {
var childs = document.getElementById(id).childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
if (childs[i].selected) {
if(BrowserType()=='IE'){
childs[i].removeNode(true);
}else{
//其餘瀏覽器.
childs[i].remove();
}
}
}
}

若有更好建議請留言,謝謝