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