使用JavaScript显示/隐藏optgroup是否为跨浏览器安全方案？当前可行性如何？

好问题！其实现在主流浏览器已经完全支持通过JavaScript来安全控制<optgroup>的显示与隐藏了，和多年前的情况已经大不一样。

现代浏览器的支持情况 #

在Chrome、Firefox、Edge、Safari的最新稳定版本中，直接修改<optgroup>的display样式属性就可以完美实现显示/隐藏：

• 隐藏：设置element.style.display = 'none'
• 显示：设置element.style.display = 'block'（或者用'revert'来恢复浏览器默认样式，兼容性更稳妥）

这里给你一个简单的示例代码：

// 选中目标optgroup
const myOptgroup = document.querySelector('optgroup[label="用户组"]');

// 切换显示状态的函数
function toggleOptgroup() {
  if (myOptgroup.style.display === 'none') {
    myOptgroup.style.display = 'revert';
  } else {
    myOptgroup.style.display = 'none';
  }
}

旧浏览器的兼容注意点 #

如果你需要兼容IE11及更早版本，那确实还会有问题——旧IE对表单元素（包括<optgroup>）的样式支持非常有限，设置display属性可能完全不生效，甚至会导致下拉菜单布局错乱。这种情况下，你提到的小型插件或者动态添加/移除<optgroup>元素的方案会更可靠（不过动态操作元素要注意提前保存选中状态）。

总结 #

如果你的目标用户群体都在使用现代浏览器，那完全不需要依赖插件，直接用简单的display切换逻辑就足够简便且安全；但如果必须兼容旧IE，那还是建议使用成熟的插件或者替代方案来避开兼容性坑。

内容的提问来源于stack exchange，提问作者migli