SELECT在浏览器中相关Bug整理

2024-07-11 08:29:13

字体：大中小

来源：转载

供稿：网友

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);
});
//项目改变时，如果选中的是“无效”的项目，则返回返回前一状态
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及以下)解决方法：

上一篇：利用UL、Li+CSS属性制作无表格实用菜单导航效果

下一篇：修复iPhone的safari浏览器上submit按钮圆角bug