IE8 select 动态下拉遇到的问题

Posted 2020-10-15 改变

发生背景:经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();
}
}
}
}

如有更好建议请留言,谢谢