SELECT在访问器中有关Bug梳理

2021-03-11 01:19 jianzhan

IE6下的select 的 z-index自始至终高于别的元素,即没法被别的元素遮盖住。

处理方式:JQueryUI的做法是在IE6下当开启弹出层时,将想遮盖住的select掩藏

在IE7及下列 尽管disabled 对 select能起功效,但对select下的option却失效。

处理方式一般是分辨访问器,假如是IE7下列的话,则当change和focus时更改option色调和而且点一下“失效”的option后 select选定的项值不会改变化

拷贝编码
编码以下:

//分辨是不是是IE7下列访问器
if (navigator.appVersion.indexOf("MSIE 5.5") >= 0 || navigator.appVersion.indexOf("MSIE 6.0") >= 0
|| navigator.appVersion.indexOf("MSIE 7.0") >= 0) {
window.attachEvent("onload", function() {
ReloadSelectElement();
//给全部select加上恶性事件
function ReloadSelectElement() {
var s = document.getElementsByTagName("select");
if (s.length > 0) {
for (var i = 0, select; select = s[i]; i++) {
(function(e) {
//得到聚焦点时,将当今选定的新项目纪录下来
e.attachEvent("onfocus", function() {
e.setAttribute("current", e.selectedIndex);
});
//新项目更改时,假如选定的是“失效”的新项目,则回到回到前1情况
e.attachEvent("onchange", function() {
restore(e);
});
})(select)
//将含有disabled特性的新项目“失效化”
emulate(select);
}
}
}
function restore(e) {
if (e.options[e.selectedIndex].disabled) {
e.selectedIndex = e.getAttribute("current");
}
}
function emulate(e) {
for (var i = 0, option; option = e.options[i]; i++) {
if (option.disabled) {
option.style.color = "graytext";
}
else {
option.style.color = "menutext";
}
}
}
})
}

获得选定的option结合(即全部被选定的option)的方法在IE中与FF/Chrome中的差别:

假如select沒有设定multiple的话(即单选的往下拉菜单),能够立即用selectedIndex获得选定的option部位。

可是,当 multiple="multiple"时(便可多选的菜单),假如想获得到全部被选定的option结合,

FF/Chrome中能够立即用selectDoc.selectedOptions

而IE(IE8及下列)中则沒有能够立即获得被选定的option结合的特性或方式

IE(IE8及下列)处理方式:

假如 multiple="multiple" 则必须迭代更新全部option,用optionDoc.selected分辨是不是被选定,从而获得被选定的option结合

在IE(6,7,8)下向select中插进option时看不见option汉语本的Bug:

 先看来1组IE下安全事故当场

再看编码

拷贝编码
编码以下:

<select id="s" style="width:100px;background:lightskyblue"></select>
<select id="s2" style="width:100px;background:lightgrey"></select>
<script>
var s = document.getElementById("s");

//方法1
s.add(new Option("A", 1));
//方法2
s.appendChild(new Option("B", 2));
//方法3
s.insertBefore(new Option("C", 3),s.options[2]);
//方法4
s.options[3] = new Option("D", "B");
//方法5
var op = document.createElement("option");
op.appendChild(document.createTextNode("E"));
s.appendChild(op);
//方法6
var s2 = document.getElementById("s2");
s2.innerHTML = "<option>X</option><option>Y</option>";
</script>

一切正常来说这5种方式都应当是没难题的。可結果是方式2,3,6无效。

处理方式的话。。只能是绕开这个坑,应用1,4,5方式吧!