IE6中select标签的option不能disabled的解决方案

最新推荐文章于 2022-05-31 15:59:45 发布

原创最新推荐文章于 2022-05-31 15:59:45 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的禁用下拉菜单选项的方法。该方法可以在用户选择被禁用的选项时，自动将选择恢复到之前的有效选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入 select-option-disabled-emulation.js 即可

内容如下：

window.onload = function() {  
  if (document.getElementsByTagName) {  
    var s = document.getElementsByTagName("select");  
 
    if (s.length > 0) {  
      window.select_current = new Array();  
 
      for (var i=0, select; select = s[i]; i++) {  
        select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }  
        select.onchange = function(){ restore(this); }  
        emulate(select);  
      }  
    }  
  }  
}  
 
function restore(e) {  
  if (e.options[e.selectedIndex].disabled) {  
    e.selectedIndex = window.select_current[e.id];  
  }  
}  
 
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";  
    }  
  }  
}

原理：select获得焦点时，记录之前的值，onchange后select值归位